Mobile
Article

Junior, a Front-end Framework for HTML 5 Mobile Apps

By Jay Raj

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.

Junior Screenshot

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.git

Navigate to the junior directory and install the required dependencies:

bower install

Once 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 history

Here 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:

todo overview

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:

addtask overview

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?

  • Ian

    Demo por favor.

  • Chris Ward

    GitHub link is in the post :)

  • Chard

    This was so last year.
    Github: https://github.com/justspamjustin/junior

  • krike06

    aargh … When I see html in javascript it makes my skin crawl. use at least twigjs!

  • Mouhsine bakhich

    i m not a fanboy but i think angularjs is the most supported js framework for the moment with a lot of documentation and tutorials and active developement branch

    • Maciej Sitko

      It is only because its so pimped and loads of money go into advertising AngularJS by Google corporation. It does not transfer to superiority. Especially that Angular is limiting as it imposes one specific driven way of solving things. This may be proficient, but in the long run, it might pose problems. It may as well be counterintuitive when, for instance, your stack relies on a different technological solution.

      All of that is pure hype for the time being, as It was with RoR, and several other platforms (someone remembers Flash hype? Adobe put loads of money into that). Of course, I do not claim that you didn’t make a valid point in regards to community/active development branch, but this varies from time to time in relation to hype, which never stays the same.

      By the way, history is full of examples of less popular technology being superior to the most popular technology. Such examples include, for instance, Linux vs Windows.

      What works – works. You don’t have to search for the most popular or trendy product on the market, because developers are no hipsters – the main aim is the need to make things work.

  • http://pulakonline.com Pulak

    First look and first impression:

    It’s easy to go with Ionic than Junior.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Mobile, once a week, for free.