Junior, a Front-end Framework for HTML 5 Mobile Apps
Junior is a front-end framework for creating HTML 5 mobile apps. Depending on external libraries like modernizer, zepto, zepto flickable, lodash and backbone, it creates mobile apps with a native look and feel by utilizing Ratchet CSS UI components.
What we’ll be creating
In this tutorial, we’ll create a simple ToDo list app from scratch using the Junior framework. We’ll have 2 screens, one to add the todo list items and the second to view all the added items.
The source code from this tutorial is available on GitHub.
Getting started
To get started, download or clone the Junior repository:
git clone https://github.com/justspamjustin/junior.gitNavigate to the junior directory and install the required dependencies:
bower installOnce the required dependencies are installed, open the index.html file in the junior folder:
Creating the Home view
Let’s start by creating a home view for our app. In the home view, we’ll display all the todo list items added by a user. The home view will also have a button to add new items to the list. We’ll be using Ratchet for creating our UI.
We’ll be starting from scratch. Create a file called app.html inside the junior folder. Include all the required js and css and add the tags that Junior expects as shown below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="lib/stylesheets/ratchet.min.css">
<link rel="stylesheet" href="src/stylesheets/junior.css">
<link rel="stylesheet" href="docs/stylesheets/lib/font-awesome.css">
<link rel="stylesheet" href="docs/stylesheets/style.css">
</head>
<body>
<div id="app-container">
<div id="app-main"></div>
</div>
<script src="lib/javascripts/modernizr.custom.15848.js"></script>
<script src="lib/javascripts/zepto.min.js"></script>
<script src="lib/javascripts/zepto.flickable.min.js"></script>
<script src="lib/javascripts/lodash.min.js"></script>
<script src="lib/javascripts/backbone-min.js"></script>
<script src="src/javascripts/junior.js"></script>
<script src="docs/javascripts/app.js"></script>
</body>
</html>Add another file called app.js inside junior/docs/javascripts. Here we’ll be defining our routes and views, Include it in the app.html file.
<script src="docs/javascripts/app.js"></script>Download and copy the ratchet stylesheets from dist/css into junior/lib/stylesheets/, replacing any that may be there already.
Let’s start by creating a list. We’ll define the html for the list and then use the junior lib to extend the view. Add the below into app.js:
var HomeTemplate = [
'<nav class="bar bar-standard">',
'<header class="bar bar-nav">',
'<button id="btnAddTask" class="btn pull-right">Add Task</button>',
'<h1 class="title">ToDo List Junior App</h1>',
'</header>',
'</nav>',
'<div class="bar bar-standard bar-header-secondary">',
' <ul class="table-view">',
' <li class="table-view-cell">Item 1</li>',
' <li class="table-view-cell table-view-cell">Item 2</li>',
' <li class="table-view-cell">Item 3</li>',
' </ul>',
'</div>'
].join('\n');Above we have defined our list as a variable. Next we’ll extend it using junior to create a view. Add the below to app.js:
var HomeView = Jr.View.extend({
render: function() {
this.$el.html(HomeTemplate);
return this;
}
});
[/js]
Now since we created our view, we need to define a route for it.
[js]
var AppRouter = Jr.Router.extend({
routes: {
'home': 'home'
},
home: function() {
var homeView = new HomeView();
this.renderView(homeView);
}
});The home function above renders the HomeView. Next initiate the router and start the backbone history by adding the below to app.js:
var appRouter = new AppRouter(); //init the router
Backbone.history.start(); //start backbone historyHere is how app.js should now look:
var HomeTemplate = [
'<nav class="bar bar-standard">',
'<header class="bar bar-nav">',
'<button id="btnAddTask" class="btn pull-right">Add Task</button>',
'<h1 class="title">ToDo List Junior App</h1>',
'</header>',
'</nav>',
'<div class="bar bar-standard bar-header-secondary">',
' <ul class="table-view">',
' <li class="table-view-cell">Item 1</li>',
' <li class="table-view-cell table-view-cell">Item 2</li>',
' <li class="table-view-cell">Item 3</li>',
' </ul>',
'</div>'
].join('\n');
var HomeView = Jr.View.extend({
render: function() {
this.$el.html(HomeTemplate);
return this;
}
});
var AppRouter = Jr.Router.extend({
routes: {
'home': 'home'
},
home: function() {
var homeView = new HomeView();
this.renderView(homeView);
}
});
var appRouter = new AppRouter();
Backbone.history.start();Save app.js and browse to the app.html#home file and you should see the below screen:
Creating the Add task view
Next we’ll be creating the add task view. This view will enable users to add a task to the existing list of tasks.
Add another variable called AddTaskView to app.js as shown:
var AddTaskTemplate = [
'<nav class="bar bar-standard">',
'<header class="bar bar-nav">',
'<button id="btnBack" class="btn btn-link btn-nav pull-left">Back</button>',
'<h1 class="title">Add Task</h1>',
'</header>',
'</nav>',
'<div class="bar bar-standard bar-header-secondary">',
'<form>',
'<input type="text" placeholder="Full name">',
'<input type="search" placeholder="Search">',
'<textarea rows="3"></textarea>',
'<button class="btn btn-positive btn-block">Save Task</button>',
'</form>',
'</div>'
].join('\n');Extend the view using junior and create a route for the Addtask view (replacing the current AppRouter variable):
//extended the view using junior lib
var AddTaskView = Jr.View.extend({
render: function() {
this.$el.html(AddTaskTemplate);
return this;
}
});
var AppRouter = Jr.Router.extend({
routes: {
'home': 'home',
'addTask': 'addTask' //added the route for Add Task View
},
home: function() {
var homeView = new HomeView();
this.renderView(homeView);
},
addTask: function() {
var addTaskView = new AddTaskView();
this.renderView(addTaskView);
}
});Set the default view to home by adding the following code:
Jr.Navigator.navigate('home',{
trigger: true
});Now try browsing to app.html and it should load the home view by default. Open app.html#addTask in your browser and you should be able to see the AddTask view as shown below:
Next, let’s add the click events to the Add Task and Back buttons in the HomeView and the AddTaskView respectively.
Define the click events for the HomeView and onClickAddTask function to navigate to the AddTaskView. Replace the current HomeView variable with the code below:
var HomeView = Jr.View.extend({
render: function(){
this.$el.html(HomeTemplate);
return this;
},
events: {
'click #btnAddTask': 'onClickAddTask'
},
onClickAddTask: function() {
Jr.Navigator.navigate('addTask',{
trigger: true,
animation: {
// This time slide to the right because we are going back
type: Jr.Navigator.animations.SLIDE_STACK,
direction: Jr.Navigator.directions.RIGHT
}
});
}
});Similarly, we need to define another click event for the Back button in AddTaskView.
Update the AddTaskView variable to this:
var AddTaskView = Jr.View.extend({
render: function() {
this.$el.html(AddTaskTemplate);
return this;
},
events: {
'click #btnBack': 'onClickBack'
},
onClickBack: function() {
Jr.Navigator.navigate('home', {
trigger: true,
animation: {
type: Jr.Navigator.animations.SLIDE_STACK,
direction: Jr.Navigator.directions.LEFT
}
});
}
});Try browsing to app.html and you should be able to navigate between the views using the Add Task and Back buttons.
Conclusion
In this tutorial. we designed a simple ToDo list app using the Junior framework. We used Ratchet components to create our mobile app UI. In the next part of this tutorial, we’ll implement the required functionality for the designed pages.
What do you think about Junior? Does it have any advantages over many of the other mobile UI frameworks?
