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?