JavaScript FrameworksDesktop to Mobile (and an overview of AngularJS)

Goals of a JavaScript Framework• Abstract repetitive code

Manage the DOM (“HTML”) Hide the idiosyncrasies of browsers

… and key for consulting….

• Promote coding guidelines and consistency.

Frameworks

Frameworks we have developers actively using or with knowledge.

Frameworks that we may want to look into.

Frameworks we want to stay away from.

How do we Pick a Framework?• Look at the Application Features

When will users need this application? At their desk, or on the go with a mobile device?

Will there be a lot of data input? Data Grids? Currency Input? Drop Down? Multi Select?

What is the Budget/Timeframe? Some frameworks that offer more come with a license cost that needs to

be accounted for.

• Consultant knowledge of the framework Does the project or timeframe give enough time to learn

a new framework?

Comparison TablejQuery AngularJS ExtJS 4

License MIT MIT Commercial

Pattern N/A MVW (MVVM’ish) MVC

Interface jQuery UI/* Bootstrap/jQuery/*

ExtJS

Unit Testing Jasmine Jasmine Jasmine

Routing Plugin Plugin Plugin

Difficulty Easy Moderate* Moderate

Ideal For Websites Single Page Apps

Data Focused SPA

* Assumes a full understanding of JavaScript

Example Project• IT Hardware Repair – User Stories

As a Admin I need to be able to add hardware. As a Admin I need to be able to delete hardware. As a User I need to submit a repair to IT.

• Single Page Application (aka SPA)

• AngularJS as the Framework

AngularJS Framework• Developed and Maintained by Google with help from the community

• Contains a light version of jQuery called jqLite.

• Very well documented with best practices

• Countless plugins that can be added very quickly and shared.

(function ($) {// most common jQuery abilities will work here

})(angular.element);

Model View Whatever (MVW)• Data Models

• View Template .HTML files.

<input name="foo" ng-model="item.foo" />

<form role="form"> <input name="foo" ng-model="item.foo" /></form>

/app/views/partials/form.html

<div ng-include="/app/views/partials/form.html"></div>

$scope.item = { foo: ‘bar’ } // Controller

Model View Whatever (MVW)Continued

• Whatever… On first glance it looks like a ViewModel, so MVVM.

$scope is pretty much a ViewModel handled by the controller.

Quack

=

$scope.doSomething = function () { /* Something */ };

MVW – What is Data Binding?• Data Binding

One-Way Data Binding Two-Way Data Binding

Source: https://docs.angularjs.org/guide/databinding

Demo

• Bootstrap – A CSS framework created by twitter

Controllers Service Views

LoginController

AdminController

UserController

InventoryService

RepairService

login.html

admin.html

user.html

Base

angular

angular-route

app

Resources• AngularJS Framework: https://angularjs.org/

• jqLite Documentation: https://docs.angularjs.org/api/ng/function/angular.element

• Bootstrap: http://getbootstrap.com/

• Bootstrap Examples: http://bootsnipp.com/

• Slides / Source Code: http://templarian.com/2014/04/30/javascript_tech_talk/

Questions?• Framework related questions? CSS? HTML? Bootstrap?

• Thanks for attending the first Tech Talk

• Enjoy a beer and discuss front end development!