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

1. Intro to Angular.js & Zend2
for Front-End Web Applications
Adrian Esquivel
aesquivel@teckpert.com
Chief Expert

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. Outline
•
•
•
•
•
Background
Intro to Zend2
Intro to Angular.JS
Demo
Q&A

4. Background: What is MVC?
• Stands for “Model-View-Controller”.
• Architecture representation data based on
user interaction.

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. Background: PHP & JS Frameworks
PHP
Zend
Symfony
CodeIgniter
CakePHP
JavaScript
Angular.js
Ember.js
Backbone.js

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. 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. 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. 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. 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. 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. 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. 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. Intro to Angular.JS: History
• Released in 2009.
• Backed by Google.
• Checkout apps built with Angular.js at
builtwith.angularjs.org.

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. 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. 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. Intro to Angular.JS: Controllers
• Respond to events.
• Gather data.
• NEVER interacts with DOM

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. 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. Intro to Angular.JS: Other Components
• Expressions.
• Forms and Filters.

23. Demo
http://angular-test.teckpert.com
Download Sample Code:
https://dl.dropboxusercontent.com/u/1183493/Intro%20t
o%20AngularJS%20and%20ZF2.zip

24. Final Notes: Target Applications
•
•
•
•
Dashboard applications.
Single-page applications.
Map interfaces.
Chart/Graph interfaces.
Pretty much any kind of UI…

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. Other Concepts
• MOVE - “Models-Operations-Views-Events”.
• SOLID - Single responsibility, Open-closed,
Liskov substitution, Interface segregation and
Dependency inversion

27. End of Presentation

28. Announcement
We’re building teams @TECKpert
Visit www.teckpert.com/careers

29. Questions?