Upload
neka
View
26
Download
0
Embed Size (px)
DESCRIPTION
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 . Frameworks. - PowerPoint PPT Presentation
Citation preview
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 CommercialPattern N/A MVW (MVVM’ish) MVCInterface jQuery UI/* Bootstrap/
jQuery/*ExtJS
Unit Testing Jasmine Jasmine JasmineRouting Plugin Plugin PluginDifficulty Easy Moderate* ModerateIdeal For Websites Single Page
AppsData 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 BindingOne-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!