1 / 13

JavaScript Frameworks

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.

neka
Download Presentation

JavaScript Frameworks

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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.

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

  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?

  5. Comparison Table * 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

  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.

  8. Model View Whatever (MVW) • Data Models • View • Template .HTML files. /app/views/partials/form.html

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

  10. MVW – What is Data Binding? • Data Binding Source: https://docs.angularjs.org/guide/databinding

  11. Demo • Bootstrap – A CSS framework created by twitter Base Controllers Service Views angular login.html LoginController InventoryService angular-route admin.html AdminController RepairService app user.html UserController

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

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

More Related