use directories for structure

app/about/about.js

@@ -0,0 +1,17 @@
+(function() {
+	// globals
+	MyApp.About = {};
+
+
+	// utility functions
+
+	// app functions
+	MyApp.About.renderAboutPage = function() {
+		$('.js-page-container').html(ejs.rr('/app/about/templates/about.ejs'));
+	};
+
+	// events
+
+	// app startup
+	page('/about', MyApp.About.renderAboutPage);
+})();

app/about/templates/about.ejs

@@ -0,0 +1,11 @@
+<p>This is the coolest app ever.<p>
+
+<ul>
+	<li>simple</li>
+	<li>fast</li>
+	<li>easy to understand</li>
+	<li>easy to mantain</li>
+	<li>easy to evolve</li>
+</ul>
+
+<p>yay!<p>

app/config.js

@@ -0,0 +1,12 @@
+// env dependent config goes here
+
+(function() {
+	if (typeof(window.MyApp) === 'undefined') {
+		window.MyApp = {};
+	}
+
+	MyApp.config = {
+		somePath: '/blabla/',
+		someOtherGlobalConfig: 'https://...'
+	};
+})();

app/index.js

@@ -0,0 +1,55 @@
+(function() {
+	// globals
+	MyApp.Utils = {};
+
+	// utility functions
+
+	// app functions
+
+	// events
+
+	// app startup
+
+	// set language
+	i18next
+	.use(i18nextBrowserLanguageDetector)
+	.use(i18nextXHRBackend)
+	.init({
+		detection: {
+			order: ['querystring', 'cookie', 'navigator'],
+			lookupQuerystring: 'lang',
+			lookupCookie: 'current-language',
+			caches: ['cookie'],
+			cookieMinutes: 5256000
+		},
+		whitelist: ['en', 'de', 'it'],
+		load: 'languageOnly',
+		fallbackLng: 'it',
+		backend: {
+			loadPath: '/i18n/{{lng}}.json'
+		}
+	})
+	.then(function() {
+		// language initialized
+		// if there is a lang query string parameter, remove it and reload: we save the language in a cookie so the url stays nice
+		var urlQueryString = new URLSearchParams(window.location.search);
+		if (urlQueryString.has('lang')) {
+			urlQueryString.delete('lang');
+			var newUrl = [location.protocol, '//', location.host, location.pathname].join('') +
+				(urlQueryString.toString() !== '' ? '?' + urlQueryString.toString() : '') +
+				window.location.hash;
+			window.location = newUrl;
+			return;
+		}
+
+		// render main shell
+		MyApp.Shell.renderShell()
+		.then(function() {
+			//setup routing
+			page({
+				hashbang: true
+			});
+		});
+	});
+
+})();

app/shell/shell.js

@@ -0,0 +1,30 @@
+(function() {
+	// globals
+	MyApp.Shell = {};
+
+	// utility functions
+
+	// app functions
+	MyApp.Shell.renderShell = function() {
+		document.title = i18next.t('vanillaJS');
+
+		var d = $.Deferred();
+
+		//preload this template, so we can be sure the dom in rendered when we resolve
+		ejs.preloadTemplate('/app/shell/templates/main.ejs')
+		.then(function(templateUrl) {
+			$('.js-main-content').html(ejs.rr(templateUrl));
+			d.resolve();
+		});
+		return d;
+	};
+
+	MyApp.Shell.renderHomePage = function() {
+		$('.js-page-container').html(ejs.rr('/app/shell/templates/home.ejs'));
+	};
+
+	// events
+
+	// app startup
+	page('/', MyApp.Shell.renderHomePage);
+})();

app/shell/templates/home.ejs

@@ -0,0 +1,8 @@
+<ul class="list-group">
+	<li class="list-group-item">
+		<a href="/text">Here is a page with some example text and something happens when you click</a>
+	</li>
+	<li class="list-group-item">
+		<a href="/about">This is just an about page</a>
+	</li>
+</ul>

app/shell/templates/main.ejs

@@ -0,0 +1,12 @@
+<div class="container">
+	<p class="js-language">
+		<a href="?lang=de" target="_self">Deutsch</a> <a href="?lang=it" target="_self">Italiano</a> <a href="?lang=en" target="_self">English</a>
+	</p>
+
+	<div class="alert alert-primary">
+		<h1><%= i18next.t('awesome') %></h1>
+	</div>
+
+	<div class="js-page-container">
+	</div>
+</div>

app/text/templates/sometext.ejs

@@ -0,0 +1,5 @@
+<ul>
+	<% for (var i=0; i<texts.length; i++) { %>
+		<li data-id="<%= texts[i].id %>" class="js-link"><%= texts[i].description %></li>
+	<% } %>
+</ul>

app/text/text.js

@@ -0,0 +1,32 @@
+(function() {
+	// globals
+	MyApp.Text = {};
+
+	// utility functions
+
+	// app functions
+	MyApp.Text.renderTextPage = function() {
+		$('.js-page-container').html(ejs.rr('/app/text/templates/sometext.ejs', {
+			texts: [
+				{
+					id: 100,
+					description: 'Some text with id 100'
+				},
+				{
+					id: 200,
+					description: 'Some other text with id 200. Click it!'
+				}
+			]
+		}));
+	};
+
+	// events
+	$(document).on('click', '.js-link', function(ev) {
+		var el = $(ev.currentTarget);
+		var linkId = el.attr('data-id');
+		PNotify.success('The text you clicked had id ' + linkId + '. Maybe next time I will do something with this id.');
+	});
+
+	// app startup
+	page('/text', MyApp.Text.renderTextPage);
+})();