use directories for structure

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>