JavaScript Frameworks Desktop 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. JavaScript frameworks are going to make things easy. This is key when you have multiple developers coding various sections of an application at the same time.

Frameworks These are just are the Frameworks that we currently have developers with knowledge. Each can be used to build on application optimized for Keyboard and Mouse or with touch screens on mobile devices. 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? This is where working with the client is key at the start of the application so the correct Framework is chosen. In this stage it is a great idea to ask a lot of questions about the input and interactive needs the user will perform when working with the application. […] Some frameworks like Sencha have a license cost involved the second you start developing an application with a commercial end goal.

Comparison Table jQuery AngularJS ExtJS 4 License MIT Commercial Pattern N/A MVW (MVVM’ish) MVC Interface jQuery UI/* Bootstrap/jQuery/* ExtJS Unit Testing Jasmine Routing Plugin Difficulty Easy Moderate* Moderate Ideal For Websites Single Page Apps Data Focused SPA MVW = Model-View-Whatever. * 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 This application could be done with any framework, but I’m going to step through why AngularJS will make the coding as simple as possible. So, what makes AngularJS so nice.

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); You’ve probably heard a developer talk about jQuery at one point around the office. It is widely used. With AngularJS it contains a lightweight version that allows AngularJS to stand alone, or if jQuery is included it will use the included jQuery library.

Model View Whatever (MVW) Data Models View Template .HTML files. $scope.item = { foo: ‘bar’ } // Controller <input name="foo" ng-model="item.foo" /> <div ng-include="/app/views/partials/form.html"></div> In this basic example a data is stored in the controller the binded to the input in the view. This is just a simple example, later in the demo I’ll show how to use a service to access data. Views work the way you expect, allowing you to organize the sections of content that will make up the application. <form role="form"> <input name="foo" ng-model="item.foo" /> </form> /app/views/partials/form.html

Model View Whatever (MVW) Continued On first glance it looks like a ViewModel, so MVVM. $scope is pretty much a ViewModel handled by the controller. Quack = Hmm… whatever… could be anything the more you use AngularJS, but lets just pretend it is VM, or ViewModel. The scope as we saw on the previous slide can contain primitive or object and can even contain functions. Primitives allow something called 2 way binding, as shown here. $scope.doSomething = function () { /* Something */ };

MVW – What is Data Binding? One-Way Data Binding Two-Way Data Binding In traditional template system the template is parsed and the model replaces the values creating a static view. While in a AngularJS view the template is actually parsed into a tightly coupled JavaScript that allows two way communication between the view and model. Source: https://docs.angularjs.org/guide/databinding

Demo Bootstrap – A CSS framework created by twitter Base Controllers Service Views angular LoginController InventoryService login.html angular-route AdminController RepairService admin.html app UserController user.html The demo is comprised of our base infrastructure. This includes vendor JavaScript files. Controllers – This application contains 3, but we’ll primarily focus on the Admin and User controller. Service – The services, while this application contains 2 services only one will be focused on. Views – Each controller in this example contains a corresponding view. Now to look at the Hardware IT Repair demo application, that I’ve called “Just Inventory Maintenance” that will allow a user to submit a hardware repair request into the JIM application. I’m just going to call it JIM for short. (our sysadmin is Jim by the way, for those reading this and not getting the amazing inside joke).

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!