Age Of SPA · Age Of SPA Från desktop till webben Fredrik Linde System Developer © [email protected] T i e t o C o r p o r a t i o n P u b l i c

Age Of SPAFrån desktop till webben

Fredrik Linde

System [email protected]©

Tiet

oC

orpo

ratio

n

Pub

lic

AgendaVarför byta från desktop till webben?Vad är en Single Page Applikation?Hur angrep vi problemet?Fredriks lärdomarExtra

© Tieto Corporation

Pub

lic

Varför byta från desktop till webben?Nytt varumärke

© Tieto Corporation

Pub

lic

Varför byta från desktop till webben?

© Tieto Corporation

Pub

lic

Varför byta från desktop till webben?Nytt varumärkeBåde on-premise och som tjänst i molnet

© Tieto Corporation

Pub

lic

Varför byta från desktop till webben?Desktop med fjärrskrivbordWebben med browser plug-insWebben med sidor genererade på servenWebben som en Single Page Applikation

© Tieto Corporation

Pub

lic

Vad är en Single Page Applikation?“A single-page application (SPA), also known as single-page interface (SPI),is a web application or web site that fits on a single web page with the goalof providing a more fluid user experience akin to a desktop application.”

-http://en.wikipedia.org/wiki/Single_page_application

© Tieto Corporation

Pub

lic

Vad är en Single Page Applikation?“A single-page application (SPA), also known as single-page interface (SPI),is a web application or web site that fits on a single web page with the goalof providing a more fluid user experience akin to a desktop application.”

-http://en.wikipedia.org/wiki/Single_page_application

© Tieto Corporation

Pub

lic

Vad är en Single Page Applikation?Ladda ner en webbsida med HTML, CSS och JavascriptStår på samma sidaLaddar resurser på begäranResurser är vyer och data

© Tieto Corporation

Pub

lic

Vad är en Single Page Applikation?

© Tieto Corporation

Pub

lic

Hur angrep vi problemetVi började med användarupplevelsenVi byggde ett ramverkVi rörde inte serven

© Tieto Corporation

Pub

lic

Kärnan i vårat ramverk

© Tieto Corporation

Pub

lic

Kärnan i vårat ramverk

© Tieto Corporation

Pub

lic

Kärnan i vårat ramverk

© Tieto Corporation

Pub

lic

Kärnan i vårat ramverk

© Tieto Corporation

Pub

lic

Kärnan i vårat ramverk

© Tieto Corporation

Pub

lic

Fredriks lärdomarDeveloper tools

© Tieto Corporation

Pub

lic

Fredriks lärdomarDeveloper toolsReflow

© Tieto Corporation

Pub

lic

Fredriks lärdomarDeveloper toolsReflowProgressive laddning

© Tieto Corporation

Pub

lic

Fredriks lärdomarDeveloper toolsReflowProgressive laddning“use strict”; jsLint och jsHint

© Tieto Corporation

Pub

lic

Fredriks lärdomarDeveloper toolsReflowProgressive laddning“use strict”; jsLint och jsHintAnvänd GPUn

© Tieto Corporation

Pub

lic

Extra

© Tieto Corporation

Pub

lic

Referenser för bilderRequireJS logo (2014-02-04) - http://requirejs.org/Knockout logo (2014-02-04) - http://knockoutjs.com/Sammy.js logo (2014-02-04) - http://sammyjs.org/UnderscoreJS logo (2014-02-04) - http://underscorejs.org/jQuery logo (2014-02-04) - http://brand.jquery.org/logos/HTML5 and CSS3 badge logo (2014-02-04) -

https://github.com/voodootikigod/logo.js/issues/39Backbone.js logo (2014-02-04) - http://backbonejs.org/Ember.js logo (2014-02-04) - http://emberjs.com/AngularJS logo (2014-02-04) - http://angularjs.org/Durandal logo (2014-02-04) - http://durandaljs.com/ReactJS logo (2014-02-04) -

http://facebook.github.io/react/img/logo_og.png

© Tieto Corporation

Pub

lic

Tack!

@flinde

©Ti

eto

Cor

pora

tion

Pub

lic