Prezi

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in the manual

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Building Modern Web Applications using AngularJS

No description
by Renato Garcia on 20 June 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Building Modern Web Applications using AngularJS

Web Application Architecture
Client Side MV* Frameworks
Modern Web Applications Examples
http://demos.kendoui.com/websushi/
http://www.5by.com/
~2004
~2009
Static Web Sites
Tiered/MVC Web
Dynamic Web Pages
Thick Clients / SPAs
~1995
~1991
Ajax
iframe
Gwt
Wicket
JSF 1.0
JSF 2.0
Rails
IE5
IE6
XMLHttpRequest
JQuery
CGI
ASP
CSS2
Chrome
DHTML
Servlet
PHP
JSP
MVC(Model 2)
REST
IE
Struts
AngularJS
Backbone.js
Spring MVC
Node.js
* Credits: Diagrams from http://www.wrml.org/architectureHistory
A brief historical overview
Firefox
Websocket
HTML5/CSS3
Applet
Flash
http://todomvc.com/
Ember
Our criteria
30+ JS frameworks/libraries!
AngularJS - An overview
Particular/Opinionated approach
Simple, clean and powerful
Embraces and extends HTML
Custom HTML components
Declarative support
Two-way data binding
Templates (DOM Based)
Routing support
Form validation
Dependency injection
Angular Scenario
Plays nicely with others e.g. RequireJS
Very active development and community
Good documentation
MIT licensed
AngularJS concepts
Expressions
Filters
Directives
Data binding
Controllers
Modules
Scopes
Dependency injection
Services
Tools
Intellij/Netbeans/TextMate/Sublime plugins
Chrome Batrang extension
Karma
Yeoman
Performance Considerations
- Initial load (server side templating)
- Modern Apps --> Modern browser/devices
- Static content + cache (HTML vs rendering)
- AMD (Asynchronous module definition)
- More suitable for apps that require lots
of interaction
z
Mixed stated client/server -> increased complexity
Presentation logic can require a lot of interactions with the server
Cost of interoperability with the amazing JS "world"! (Wrapping)
Twitter
https://blog.twitter.com/2012/improving-performance-twittercom
Using pure HTML / JavaScript
Explosion of JS boilerplate code
No separation of concerns (DOM + 'data-')
Global state vs view state
SPAGHETTI RECIPE!
User Experience
Browsers capability
Devices power
JavaScript
Two-way data binding
DRY model definition
Built-in functionalities
Maturity/Documentation
Credit: http://net.tutsplus.com/tutorials/javascript-ajax/important-considerations-when-building-single-page-web-apps/
Ember
Knockout
Model definition samples
Modern Web Application
Why client side MVC framework?
Why AngularJS?
AngularJS concepts
Build an AngularJS simple application

Introduction
Building Modern Web Applications using AngularJS
Renato Garcia
http://builtwith.angularjs.org/
More...
Server side approach - Modern apps
// Getter
myViewModel.personName()
// Setter
myViewModel.personName('Mary')
Presentation:
See the full transcript