Intro to Angular.js & Zend2 for Front-End Web Applications

5,944 views
5,542 views

Published on

Intro to how to use Zend2 and Angular to create front end web applications.

Published in: Technology

Intro to Angular.js & Zend2 for Front-End Web Applications

  1. 1. Intro to Angular.js & Zend2 for Front-End Web Applications Adrian Esquivel aesquivel@teckpert.com Chief Expert
  2. 2. About Me • • • • • Grew up in Miami Computer Engineering @UF Defense and security 7 Years Chief Expert @TECKpert since 2009 Leading engineering teams for 10+ years
  3. 3. Outline • • • • • Background Intro to Zend2 Intro to Angular.JS Demo Q&A
  4. 4. Background: What is MVC? • Stands for “Model-View-Controller”. • Architecture representation data based on user interaction.
  5. 5. Background: Why MVC? • Modularize the user interface. • Consolidate front end code (HTML5). • Different skill sets in development (front/back). • Smaller front end code footprint. • Take advantage of cloud architecture.
  6. 6. Background: PHP & JS Frameworks PHP Zend Symfony CodeIgniter CakePHP JavaScript Angular.js Ember.js Backbone.js
  7. 7. Intro to Zend2: History • Started by graduates of Technion, Israeli hightech university, in 1997. • Zend Technologies established in 1999. • Opened US office in 2004 and established offices worldwide. • Commercial products from IDE to Server software, security and certification.
  8. 8. Intro to Zend2: Benefits • • • • • • Based on PHP 5.3+. 100% Object-Oriented. Flexible components and full-featured stack. Autoloading and dependency injection. Modules Event manager.
  9. 9. Intro to Zend2: Models • • • • • Single object or collection of objects. Represents logical layer. Contains application logic (i.e. business logic). Manages data - stores, manipulates, responds. Nothing to do with a user interface.
  10. 10. Intro to Zend2: Views • Visual representations of a model. • Here’s where all your front end code is (HTML, JS, CSS). • Zend2 file format: .phtml.
  11. 11. Intro to Zend2: Controllers • • • • • Interprets user action. Link between the model and view. Changes the state of the model and view. Manages the output. Always name files with “*Controller”. – E.g. MapController.php • Minimize code in controller with modules and events.
  12. 12. Intro to Zend2: Modules • Basic unit of ZF2. • Collection of code and other files that solves specific problem. • Contains namespace and class file (module.php)
  13. 13. Intro to Zend2: Events • Events are actions. • A Listener is a callback that reacts to an event. • Event manager is an object that pulls together listeners for one or more events.
  14. 14. Intro to Zend2: How to Start • Download latest package (2.2.5). – https://packages.zendframework.com/ • Start with a skeleton application. – http://framework.zend.com/manual/2.2/en/userguide/skeleton-application.html • Build something simple.
  15. 15. Intro to Angular.JS: History • Released in 2009. • Backed by Google. • Checkout apps built with Angular.js at builtwith.angularjs.org.
  16. 16. Intro to Angular.JS: Benefits • • • • • Based on MVC. Breaks away from DOM manipulation. Supports two way data binding. Works well with other libraries. Easy to test.
  17. 17. Intro to Angular.JS: How to Start • Download – http://angularjs.org/ • Watch tutorials and case studies. – http://docs.angularjs.org/tutorial – http://builtwith.angularjs.org/ • Install it in Zend2 skeleton app.
  18. 18. Intro to Angular.JS: Data Binding • Syncs data between model and view components. • Does this automatically. • Traditional templates bind data one way. • Angular binds data two ways – keeps the model in sync (single-source) and the view as a snapshot. • Great for testing.
  19. 19. Intro to Angular.JS: Controllers • Respond to events. • Gather data. • NEVER interacts with DOM
  20. 20. Intro to Angular.JS: Directives • Markers on elements. – <input data-ng:model=“Hello"> • Tells Angular on “compilation” to modify behavior on the element • Used for DOM interaction and manipulation. • Angular has built in directives
  21. 21. Intro to Angular.JS: Services • Can handle complex business logic. • Bring services to the client side. • Objects or functions that execute tasks for components (i.e. controller) that depend on it.
  22. 22. Intro to Angular.JS: Other Components • Expressions. • Forms and Filters.
  23. 23. Demo http://angular-test.teckpert.com Download Sample Code: https://dl.dropboxusercontent.com/u/1183493/Intro%20t o%20AngularJS%20and%20ZF2.zip
  24. 24. Final Notes: Target Applications • • • • Dashboard applications. Single-page applications. Map interfaces. Chart/Graph interfaces. Pretty much any kind of UI…
  25. 25. Final Notes: Tips • • • • • Develop your application stack with Zend2. Use HTML5 and CSS3. Create web and mobile views. Use Angular.js to be “device-agnostic”. Make use of operations, events, and bindings.
  26. 26. Other Concepts • MOVE - “Models-Operations-Views-Events”. • SOLID - Single responsibility, Open-closed, Liskov substitution, Interface segregation and Dependency inversion
  27. 27. End of Presentation
  28. 28. Announcement We’re building teams @TECKpert Visit www.teckpert.com/careers
  29. 29. Questions?

×