Post on 27-Jan-2015
description
Intro to Angular.js & Zend2 for Front-End Web Applications
Adrian Esquivelaesquivel@teckpert.comChief Expert
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
Outline
• Background• Intro to Zend2• Intro to Angular.JS• Demo• Q&A
Background: What is MVC?
• Stands for “Model-View-Controller”.• Architecture representation data based on
user interaction.
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.
Background: PHP & JS Frameworks
PHPZend
SymfonyCodeIgniter
CakePHP
JavaScriptAngular.jsEmber.js
Backbone.js
Intro to Zend2: History
• Started by graduates of Technion, Israeli high-tech 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.
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.
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.
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.
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.
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)
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.
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/user-
guide/skeleton-application.html• Build something simple.
Intro to Angular.JS: History
• Released in 2009.• Backed by Google.• Checkout apps built with Angular.js at
builtwith.angularjs.org.
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.
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.
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.
Intro to Angular.JS: Controllers
• Respond to events.• Gather data.• NEVER interacts with DOM
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
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.
Intro to Angular.JS: Other Components
• Expressions.• Forms and Filters.
Demo
http://angular-test.teckpert.com
Download Sample Code: https://dl.dropboxusercontent.com/u/1183493/Intro%20to%20AngularJS%20and%20ZF2.zip
Final Notes: Target Applications
• Dashboard applications.• Single-page applications.• Map interfaces.• Chart/Graph interfaces.
Pretty much any kind of UI…
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.
Other Concepts
• MOVE - “Models-Operations-Views-Events”.• SOLID - Single responsibility, Open-closed,
Liskov substitution, Interface segregation and Dependency inversion
End of Presentation
Announcement
We’re building teams @TECKpert
Visit www.teckpert.com/careers
Questions?