Adventure Time with JavaScript & Single Page Applications

44 %
56 %
Information about Adventure Time with JavaScript & Single Page Applications
Education

Published on November 18, 2013

Author: fitc_slideshare

Source: slideshare.net

Description

with Carl Bergenhem
Presented at Web Unleashed 2013 in Boston on Nov 7-8, 2013.

We’ve all seen the phrase ‘Single Page Application’ or ‘SPA’ everywhere and everyone talks about how they’re the best thing since sliced bread, but what is an SPA really? Why are they the cat’s pajamas? In this session Carl will take a look at a few of the popular SPA frameworks out there: AngularJS, BackBoneJS, and Kendo UI. He will also cover what a SPA does in general, what makes each one of these libraries unique, and how they can be utilized in your web development today.

Adventure Time with JavaScript & Single Page Apps Carl Bergenhem - Web Unleashed 2013 - @carlbergenhem

Introductions Carl Bergenhem Manager, Solutions Consultants Telerik @carlbergenhem

Quick Notes

Covering a lot of ground today

High level overview

More code in tomorrow's workshop 9 AM - 12:30 PM @ Room 325 BC

What is a SPA?

Single Page Application

A web app that fits in a single page

Entire app is loaded at once

Built with a MV* Framework

Server provides the initial app

Section our HTML page in views

Get data via RESTful requests

Bind the data to our UI

Business logic in our MV* framework

MV* framework handles URL requests

Why SPA?

Create desktop-like apps in the web

Increase responsiveness

Reduce loadtime of pages

Less time spent on the server

Control user interactions on the client

Improved end-user experience

History

In the Beginning Reign of the post back

Everything done on the server

Full page refreshes

We got wiser Ajax & XHR Requests

Serve some content via server

Do asynchronous calls to server

Partial page refreshes

Focus on responsiveness Introduce the SPA concept

Move all items over to the client

What makes up a SPA?

MV* Framework

Basic pieces of a MV* Model View *

A full SPA framework also has Routing

Model

In charge of holding data

Communication with server

Work with server end-points

Define what data should be used

Controller

Control applications' State Logic Behavior

Custom business logic

Communicate between the View and Model

Provide validation

Bind data to our Views (UI)

View

Responsible for the UI of our app

Modifies and interacts with our DOM

Main point of interaction from users

Bound to the controller for data and events

Often works with a template engine

Router

Responds to URL changes via JavaScript

Changes between various views

Browser initiated routes Type in a URL Hyperlink

Client initiated routes

Change from one page or a view to another

Utilizes hash fragments ht:/yr.o//rdcs tp/mulcm#pout/

JS rights to modify page URL Anything after '#' is fair game

Just like the anchor tag

Examples

Wild SPA Apps Gmail Facebok Twitter Trello Asana

Popular MV* Frameworks

Backbone Angular Kendo UI Ember Durandal Meteor

Today's Focus Backbone Angular Kendo UI

Backbone

Light-weight library

The basic foundation

Not a ton of extra frills

Heavy lifting is up to you

Huge community for tooling

Offers a set of helpful classes

Each one can - and will be extended

Backbone main classes Model Collection View Router

Model

Deals with all of our data

Bound to a view

Syncs back to our server

Backbone.Model vrmMdl=nwBcbn.oe(}; a yoe e akoeMdl{)

Extend Method vrCaatr=Bcbn.oe.xed{ a hrce akoeMdletn( dfut:{ eals nm:'lns, ae Bak' seis 'ua' pce: Hmn, dsrpin 'odsrpinyt' ecito: N ecito e. } , iiilz:fnto( { ntaie ucin) cnoelg'e caatrcetd) osl.o(Nw hrce rae'; } }; ) vrjk =nwCaatr{ a ae e hrce( nm:'aeteDg, ae Jk h o' seis 'o' pce: Dg, dsrpin ' mgcldg Bs fin,adbohr wt Fn. ecito: A aia o. et red n rte, ih in' }; )

Use get() or set() to change data vrfn =nwCaatr{nm:'inteHmn }; a in e hrce( ae Fn h ua' ) fn.e( seis 'ua'}; inst{ pce: Hmn ) vrnm =fn.e(nm';/Fn teHmn a ae ingt'ae) /in h ua

Collections

Group related models together

Methods for adding/removing models

Simple array-like object

Backbone.Collection vrCaatr=Bcbn.oe.xed{ a hrce akoeMdletn( dfut:{ eals nm:'lns, ae Bak' seis 'ua' pce: Hmn, dsrpin 'odsrpinyt' ecito: N ecito e. } , iiilz:fnto( { ntaie ucin) cnoelg'e caatrcetd) osl.o(Nw hrce rae'; } }; ) vrCs =Bcbn.olcinetn( a at akoeCleto.xed{ mdl Caatr oe: hrce }; ) vrjk =nwCaatr{ a ae e hrce( nm:'aeteDg, ae Jk h o' seis 'o' pce: Dg, dsrpin ' mgcldg Bs fin,adbohr wt Fn. ecito: A aia o. et red n rte, ih in' }; ) vrfn =nwCaatr{ a in e hrce( nm:'inteHmn, ae Fn h ua' seis 'ua' pce: Hmn, dsrpin 'h ls hmni teLn o Oo Hnsotwt Jk. ecito: Te at ua n h ad f o. ag u ih ae' }; ) vrcsLs =nwCs( jk,fn ]; a atit e at[ ae in ) cnoelgcsLs.oes; osl.o(atitmdl)

View

The link between models and the UI

Renders the models and their data

Views are bound to models or collections

Receives events from the Model and HTML document

The 'el' property Every view has an 'el' property If not defined, a blank div is created References the view's DOM object Pass in a HTML element to modify it Can be a jQuery object via $el

Backbone.View vrFnVe =Bcbn.iwetn( a iniw akoeVe.xed{ tgae 'i' aNm: dv, i:'ini' d fnDv, casae 'inls' lsNm: fnCas, atiue:{ trbts 'aacso' 135 dt-utm: 24 } }; ) vrqikiw=nwFnVe(; a ucVe e iniw) $'paeodr)peedqikiwe) (#lchle'.rpn(ucVe.l;

Resulting HTML <i dt-utm"24"i=smlDv cas"apels"<dv dv aacso=135 d"apei" ls=smlCas>/i>

Default templates by Underscore jsBin.com/IWewESE/8/

Router

Use of hash fragments ht:/yr.o//hrces tp/mulcm#caatr/

Parses URL and finds appropriate function

Uses HTML5 History API if possible

Backbone.Router vrSmlRue =Bcbn.otretn( a apeotr akoeRue.xed{ rue:{ ots 'hrce/nm' 'hrce'/ruepten:hnlrnm caatr:ae: caatr /ot atr ade ae } , caatr fnto(ae {/hnlr hrce: ucinnm) /ade /.. /. } }; )

Backbone Summary

Barebones tools to build our app

Emphasis on data and Models

Not a ton of tools for the View

.extend({}) everything

Backbone main classes Model Collection View Router

Model deals with all of our data

A collection has multiple Models

View needs a Model Works with Model and DOM

Router works with URL to serve correct View

Angular

Created by Google

Believes HTML can be more powerful

Extends HTML vocabulary

Tries to follow a pure HTML path

Angular components Expressions Controllers Directives Routing

Expressions

Allows us to bring data to the view

Uses a simple syntax {{ model.FieldName }}

One-way binding <i n-otolr"apeotolr> dv gcnrle=SmlCnrle" <pn{ caatrnm }<sa> sa>{ hrce.ae }/pn <dv /i>

Two-way binding <eetn-oe=slceCaatr> slc gmdl"eetdhrce" <pinvle""Fn<oto> oto au=0>in/pin <pinvle""Jk<oto> oto au=1>ae/pin <pinvle""BO/pin oto au=2>M<oto> <slc> /eet

Controllers

Central component of Angular apps

Contains data, logic, and states

Creates a scope for the HTML element $scope variable

Sample Controller vrsmlApotolr =aglrmdl(smlApotolr' [) a apepCnrles nua.oue'apepCnrles, ]; smlApotolr.otolr'hwotolr,[$cp' apepCnrlescnrle(SoCnrle' 'soe, fnto SoCnrle(soe { ucin hwotolr$cp) $cp.apeaibe=1 soesmlVral ; $cp.apera =[ soesmlAry { fedn:0 ilOe , fedw:"et ilTo Ts" } , { fedn:1 ilOe , fedw:"ape ilTo Sml" } ] $cp.apeucin fnto( { soesmlFnto: ucin) /Fnto lgc /ucin oi } }) ];

$scope only available within the HTML element it is defined in

Directives

HTML-like attributes

Declared in view code

Helps with setting up Angular App Controllers and binding Attributes Conditional display Events

Sample Directives ng-app="appName" ng-controller="SampleCtrl" ng-model="ScopeVar" ng-src="{{scopeUrlVar}}" ng-click="eventHandler()"

Routing

Works with URL like you'd think

Single main view Placeholder element for content

Load other views via partials Just HTML pages

Simple structure for routing vrsmlAp=aglrmdl(smlAp,[ a apep nua.oue'apep' 'got' nRue, 'yotolr' mCnrles ]; ); smlApcni('ruervdr, apep.ofg[$otPoie' fnto(ruervdr { ucin$otPoie) $otPoie.hn'ts' {tmltUl 'atasts.tl,cnr ruervdrwe(/et, epaer: pril/ethm' oto $otPoie.hn'sml:d,{tmltUl 'atassml.tl, ruervdrwe(/apei' epaer: pril/apehm' $otPoie.tews( rdrcT:''}; ruervdrohrie{ eieto / ) }) ];

Angular Summary

Extension of HTML

Empowering your regular HTML code

Controllers rule all

Data can be bound one- or twoway

DOM manipulation via controller Drop that jQuery ;)

Directives are extremely helpful Wire upp events and such

Routers use partials of HTML

Kendo UI

Part of Kendo UI Web

Combine SPA and MVVM Frameworks

Additional helpful items Template engine Effects and animations UI widgets Charts and gauges

Tooling across all parts of your SPA

Kendo UI key pieces Observable View Layout Router

Observable

Part of the Kendo UI MVVM framework

All fields are observable

All changes will propogate

kendo.observable vrfnMdl=knoosral( a inoe ed.bevbe{ nm:'inteHmn, ae Fn h ua' seis 'ua' pce: Hmn, dsrpin 'h ls hmni teLn o Oo Hnsotwt Jk. ecito: Te at ua n h ad f o. ag u ih ae' }; )

Use get() or set() with fields vrfnMdl=knoosral( a inoe ed.bevbe{ nm:'inteHmn, ae Fn h ua' seis 'o' pce: Dg, dsrpin 'h ls hmni teLn o Oo Hnsotwt Jk. ecito: Te at ua n h ad f o. ag u ih ae' }; ) fnMdlst'pce' 'ua'; inoe.e(seis, Hmn) vrseis=fnMdlgt'pce';/Hmn a pce inoe.e(seis) /ua

View

Can be defined with simple HTML string

Works with Kendo UI templates

Tie in with our observables to create data bound UI

kendo.View() vridx=nwknoVe(<pnAvnueTm!/pn'; a ne e ed.iw'sa>detr ie<sa>) idxrne(#lchle'; ne.edr'paeodr)

With Kendo UI Templates and Observables jsbin.com/imAnimo/5/

Layout

Provides a layout for views to adhere to

MasterPages for you .NET folks

Easily display views in content section

Can also be nested

kendo.Layout vrve =nwKnoVe(<pnFn teHmn/pn'; a iw e ed.iw'sa>in h ua<sa>) vrlyu =nwknoLyu(<edrHae<hae>dvi=cnet>/i>foe>otr/otr'; a aot e ed.aot'hae>edr/edr<i d"otn"<dv<otrFoe<foe>) lyu.edr$'ap); aotrne((#p') lyu.hwn'cnet,ve) aotsoI(#otn' iw;

Router

Responsible for application state

Navigate between views

Use of hash fragments ht:/yr.o//hrces tp/mulcm#caatr/

Can programmatically navigate

Use with Layout to show new content

kendo.Router() vrrue =nwknoRue(; a otr e ed.otr) rue.ot(/,fnto ( { otrrue'' ucin ) lyu.hwn'cnet,hmVe) aotsoI(#otn' oeiw; }; ) rue.ot(/hrce' fnto ( { otrrue'caatr, ucin ) lyu.hwn'cnet,caatriw; aotsoI(#otn' hrceVe) }; ) $fnto( { (ucin) rue.tr(;/vr iprat otrsat) /ey motn }; ) rue.aiae'caatr) otrnvgt(/hrce';

Kendo UI Summary

Tools across the board

Classes for dealing with data

Helpful UI and View classes

Large set of UI widgets

Kendo UI SPA key items Observable View Layout Router

The End Thanks for attending! @carlbergenhem github.com/bergenhem/talks

Add a comment

Related presentations

Related pages

Adventure Time with JavaScript and Single Page Applications

We’ve all seen the phrase ‘Single Page Application’ or ‘SPA’ everywhere and everyone talks about how they’re the best thing since sliced bread ...
Read more

Developing a Large Scale Application with a Single Page ...

Developing a Large Scale Application with a Single Page Application (SPA) using AngularJS. ... your Javascript applications. ... Single-Page applications ...
Read more

Web Design Blueprints | PACKT Books - packtpub.com

Web Design Blueprints. ... and roll-your-own single-page applications. ... and optimizing faster web applications with JavaScript
Read more

Building a JavaScript-Based Game Engine for the Web - YouTube

Building a JavaScript-Based Game ... for isometric real-time games and will give ... Single Page Web Applications: JavaScript End ...
Read more

Programm - International PHP Conference

Keep your Users up to date in Real-Time with ... JavaScript Frameworks for Single Page Applications. Oliver Zeigermann ... JavaScript Webentwicklung ...
Read more

Fixing Performance in the Web Stack - Pony Foo

Fixing Performance in the Web ... of transferring the entire record through the wire every single time. ... saying single page applications are ...
Read more

Working at Mediaclip | Mediaclip

Working at Mediaclip. ... JavaScript applications (single-page apps) ... we use the Scrum method and have integrated over time several good practices, ...
Read more

ReactJS by Example - Building Modern Web Applications with ...

... Building Modern Web Applications ... It aims to address the challenges encountered in developing single-page applications, ... His spare time is ...
Read more

Building Single Pages Applications - beletsky.net

Building Single Pages Applications. ... Single Page Applications. ... of making such applications. Nowadays, we see MV* JavaScript frameworks are ...
Read more

Build a simple client-side MVC app with RequireJS ...

Build a simple client-side MVC app with ... JavaScript single page interfaces like this one ... about large scale JavaScript applications and ...
Read more