Loading presentation...

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 our knowledge base article

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 Client Side Web Applications

No description
by

Dániel Kocsán

on 25 January 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Building Client Side Web Applications

1995
Unobtrustive
Javascript
Land of www
Semantic
Web
Valley of
Angular.js

Building Client Side
Web Applications

1990
2006
2010
Pikes of
Obstacles

MVC
Dependency
Injection
Web
Components
Test
Driven
Development
Adobe Flash
SEO
Ajax
JQuery
Javascript
HTML
Dynamic
Web
Now
Services
Template
Directive
Scope
Filter
1990
Created by
Tim Berner's Lee
Displaying text
1997
HTML 4.0
was released
First
standard
1999
HTML 4.01
was released
now
HTML5
as a draft
1995
Created by
Brendan Eich
Netscape 2.0
Aiming
nonprofessional
programmers
1996-'99
ECMAScript 1-2-3
2009
ECMAScript 5
now
Harmony
Node.js
Very popular
Lots of
frameworks
ECMAScript 5.1
in 2011
Aiming..
Separation of business logic and presentation layer
Handing cross-browser inconsistency
Maintain accessibility
Progressive enhancement
Graceful degradation
"information that can be readily interpreted by machines"
Bad
Good
Asynchronous web applications
Communicating with the server side without page reload
Group of technologies
1990
Static web
pages
1996
Iframe tag
2004
Gmail
2006
XMLHttp
Request
Google
Maps
History
History
History
Javascipt library by John Resig
Cross-browser incompatibility
Manipulating the DOM
Used by over 65% of the 10,000 most visited websites
Sizzle
Open Source
Animations
Desktop like user experience
Single page web application
Dynamically modifying the DOM
Ajax or Websocket
URL Handling
Memory management
Design pattern for implementing user interfaces
Model
View
Controller
User
Application data
and
business logic
Turns user input to commands
Outputs representation of information
Retrieves
application data
Quality assurance
Quick feedback
Confidence to change
Drives architecture design
Mocha
Loose coupling
Law of Demeter
Testable codebase
"Each unit should have only limited knowledge about other units"
Client side templates
Custom elements
Shadow DOM
Imports
Currently in
draft state
Inconsistent
browser
support
Model
View
Controller
Maintained by Google
Open source
Declarative programming
Extends traditional HTML
Supports creating SPAs
Opinionated
Testable
Separates DOM
from business logic
Decouple client side app from server side
Expressions
Directives
Filters
Special kind of Javascript code snippets
Evaluation is against the current scope
Doesn't use eval()
Forgiving with undefined and null
The are no flow control statements (for, if, while, throw, etc.)
Extension of HTML
They can be
Attribute
Class
Element
Comment
Suggested to use for DOM manipulation
Independent functional elements
Can have separate scope
@ text
= expression
& function
Can be embeded
Built in directives
ng-app
ng-model
ng-bind
ng-repeat
Pre-process an expression's value
Can be used from a template, service or a controller
Easy to create a custom filter
You can chain filters
You can set parameters to filters with {{ expression | filter:argument1:argument2:... }} syntax
Data binding
Services
"Data binding is the process that establishes a connection between the application UI and business logic"
JavaScript constructor function
Used to augment the Angular Scope
Responsibilities
Set up the initial state of the $scope object
Add behavior to the $scope object
Can be embedded
Independent modules
Consist application data and business logic
Singletons
Use Dependency Injection
Can depend on other services
Full transcript