1. JavaScript Frameworks
Desktop to Mobile (and an overview of AngularJS)

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

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

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

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

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

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

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

9. 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 */ };

10. 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:

11. 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).

12. Resources AngularJS Framework: https://angularjs.org/
jqLite Documentation:
Bootstrap:
Bootstrap Examples:
Slides / Source Code:

13. Questions? Framework related questions? CSS? HTML? Bootstrap?
Thanks for attending the first Tech Talk
Enjoy a beer and discuss front end development!