Organizing & structuring sPA

28.01.2014.



Miloš Janjić (Vivify Ideas)
milos@vivifyideas.com

What is spa?


Web application or web site that fits on a single web page with the goal of providing a more fluid user experience.

Technically, most web pages already are SPAs; it’s the complexity of a page that differentiates a web page from a web app.

benefits of building spa


  • Decreasing load time of pages
  • Easier data transfer between pages
  • Better UX and more complex user interface 
    (instead of trying to control so much from the server)
  • REST-ful API

9 steps for successful spa


  1. Application Framework
  2. Organizing Code
  3. Templates
  4. Package Management
  5. Testing
  6. CSS Pre-processors 
  7. Preparing for production
  8. Tools & Libraries 
  9. Performance Considerations


1. Application framework

jquery is not enough?


lets say for abstraction...

Picking right App framework


What to look at:

Community, Leadership, Maturity, Size, Dependencies, Interoperability, Inspiration, Learning curve, and Features

Think about of  your application complexity, and then make final decision!

comparison between app frameworks

 
 

Data binding


This is the most touted feature of these frameworks.

  • One-way
    You change the data in an HTML input and the JavaScript object bound to that input is immediately updated as well (as any other UI elements that are bound to that same property).

  • Two-way
    It will also work the other way. If you change the JavaScript object, the html will automatically refresh.

Diff between libs and frameworks



Libraries: Backbone, Knockout, Spine, CanJS

Frameworks: AngularJS, Ember, Batman, Meteor

main features of a JS Framework?


  • Two-way Binding
  • View Templates
  • Data Storage
  • URL Routing
  • Generic pub/sub event model 
  • Support for object-oriented inheritance


2. Organizing code

common questions?


  • Is JavaScript Object-oriented?
  • Group code by feature or layer?
  • Group code into large files or lots of smaller one?
  • How much logic should I put in templates?

Folders/files structure


Tell me how to load all this files?


  1. Standard, using regular <script> tags

  2. Using Module-Based systems
    1. AMD (Asynchronous Module Definition)
    2. CommonJS

Asynchronous Module Definition

  • RequireJS - http://requirejs.org

 define([
    // listing out the dependencies (relative paths)
    'features/module/BaseView',
    'utils/formatters'
], function(BaseView, formatters) { // Export function that takes in the dependencies and returns some object
 
    // do something here
 
    // An explicit require
    var myModule = require('common/myModule');
 
    // Object exposing some functionality
    return { ... };
});

Commonjs

  • Browserify - http://browserify.org

 var fs = require('fs'), // standard or built-in modules
    path = require('path'),
    formatters = require('./utils/formatters'); // relative file path as module name
 
// Export my code
module.exports = { ... };   


3. Client-side templates

popular Client-side templates


  • Underscore - underscorejs.org 
  • Handlebars - handlebarsjs.com
  • EJS - embeddedjs.com
  • HoganJS - twitter.github.com/hogan.js
  • Jade - github.com/visionmedia/jade
  • Mustache - github.com/janl/mustache.js
  • PureJS - beebole.com/pure

Built-in template system


4. Package MANAGEMENT 

package management


Package management identifies all the dependencies in your app with specific names and versions.

Bower - http://bower.io

Bower lists the client-side dependencies in component.json  and they are downloaded by running the bower CLI tool


5. testing

Testing


On the client-side, Jasmine, Mocha and Qunit are the most popular testing frameworks.

  • Jasmine - http://pivotal.github.io/jasmine
  • Mocha - http://visionmedia.github.io/mocha
  • Qunit - http://qunitjs.com

Testacular (run tests in multiple browsers)
http://karma-runner.github.io/


6. CSS pre-processors

why CSS Pre-processors?


CSS preprocessors solve this problem and help to organize, refactor and share common code.

Most popular: SASS, LESS, Stylus

front-end frameworks


  • Speeds up your development
  • Enables cross-browser functionality
  • Clean and symmetrical layouts
  • Enforces good web design habits


Most popular:

  • Twitter bootstrap - http://getbootstrap.com
  • Zurb Foundation - http://foundation.zurb.com
  • Skeleton - http://www.getskeleton.com
  • Less - http://lessframework.com


7. Preparing for production

Why production preparation?

Preparation steps:

  1. Tests are passing
  2. Combine & Minimize all your JS files
  3. Combine & Minimize all your CSS files
  4. Include hash in JS and CSS file names

Popular tools:

  • RequireJS optimizer - http://requirejs.org
  • UglifyJS - https://github.com/mishoo/UglifyJS
  • Jammit - http://documentcloud.github.io/jammit


8. tools & libs

Tools for easier development


  • Chrome developer tool is your best friend
  • JSHint - to catch lint issues in your JavaScript files
  • Yeoman - to quickly build the initial scaffolding for the project. There are other tools to consider such MimosaJS and Middleman
  • Grunt or Gulp- Extensible build tool that can handle a variety of tasks
  • Code editors such as Sublime Text, WebStorm, Vim...
  • Bower - Package manager

Libraries that will make you life easier


  • Visualizations: Highcharts, D3, xCharts, and Raphaël
  • Formatting: Numeraljs, Accountingjs, and Momentjs
  • Controls: Select2, jQueryUI
  • Helpers: Underscore (Lodash), Sugar, Modernizr, and Html5 Boilerplate


9. PERFORMANCEs

Tips & trics for better PERFORMANCE


  • Simplify CSS selectors
  • Preloading data on server side
  • Minimize DOM manipulations
  • Clean up event handlers when its not needed
  • Use CDNs for serving libraries and static assets
  • Minimize JS and CSS files (use sprites when you can)
  • Reduce number of XHR requests


The end


Thanks for attention

Organizing and structuring SPAs

By Milos Janjic

Made with Slides.com

Organizing and structuring SPAs

  • 3,260