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

teatime 2013

No description
by

Timo Lyytinen

on 10 April 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of teatime 2013

Single-page Web Applications Who Timo Lyytinen

Passionate Software Developer Backend<->frontend
(HTML on the backend) Backend<->frontend
(progressive enhacement) Always think about the latency when using Internet as the gateway between the browser and the backend
source: http://pinkunderbelly.files.wordpress.com/2011/03/gypsy-fortune-teller.jpg Case study: AssisDent5 Most comprehensive and easy-to-use dental care application by Entteri Oy AssisDent5 Backend Table of contents Single-page application?
Why?
How?
What's cool?
Backbone.js & Marionette.js
Full-stack UI
Testing
Problems & solutions
Case study

That's all folks ASP.NET Web API
Windows Azure Frontend Customer specific ui solutions

Backbone.js
Marionette.js
Twitter bootstrap Cross-origin resource sharing Backend<->frontend (Single-page architecture) Existing backend + backbone.js Source:http://www.columbia.edu/cu/computinghistory/a04.jpg Source: http://www.ww2incolor.com/news/images/1221.jpg Managing custom stack is similar to trying to get the right blocks in tetris.
WHY? User experience
Performance
Separation concerns
API design
Security HOW Source: http://www.murraymitchell.com/wp-content/uploads/2011/06/world_war_2_paratroopers_landing_on_dropzone.jpg Backbone.js (OK parts) Rest API communication
Backend integration
Browser support
Extensibility -> jQuery
So small you know what's happening under the hood Backbone.js it's a library (bad parts) Marionette.js "Composite application library for Backbone.js that aims to simplify
the construction of large scale JavaScript applications" Full-stack UI development All the stuff mentioned earlier
+ Grunt The JavaScript Task Runner Backend Rest API -> backend technology agnostic Testing Challenges API > Request count
Latency
Backend performance
Old browsers
CORS
Stack management
Support
Developer know-how Summary Embrace change Thank you Questions? Scale applications out with modular, event driven architecture

Easy to modify to make it work with your application's specific needs

Reduce boilerplate for views, with specialized view types

Built-in memory management and zombie killing in views, regions and layouts github Stargazers Backbone.js: 13351
Angularjs: 8002
Marionette.js: 2521 Forks Backbone.js: 2471
Angularjs: 1391
Marionette.js: 39 Automate easily the boring tasks -> minification
compiling
concating
testing
linting
releasing
development server
... and more Bower package manager for the web mocha + wd.js + phantomJs + selenium Integration testing selenium + cloud Look and feel -> manual testing Checklist API design
Concatenation
Minimication & Gzipping
Avoiding view re-rendering
Pre-compiling templates
CDN
Technology choices Kaizen mentality Build your own stack based on YOUR needs
-> keep it up-to-date Source: http://swittersb.files.wordpress.com/2012/07/cave-coast.jpg Timo Lyytinen
+358 40 5554598
timo.lyytinen(at)vincit.fi Missing -> Two-way data binding

Deep models
Model relations
Model validation
Views

client-side templating
i18n
Dependency management
Build system
Testing
Ui components backbone.stickit

backbone-deep-model
Backbone-relational
backbone-validator
marionette.js

handlebars.js
i18next
bower
grunt
jasmine, mocha, ...
jQuery, bootstrap, ... Application structure & architecture
navigation
Authentication
File-system structure
Routing Backbone.js Stagnated functionality
Design principles
Addon & stack management (bad parts) Think if you really need ie6 support, developments tools, features and JS engine speed are lacking IE10 is a good browser though Predicing the future is never easy, and sometimes you have to use your best guess and go with a technology that feels best for your needs If you don't sometimes make hard decisions you'll end up with a legacy system that's really expensive, difficult and boring to develop. Sometimes you'll get great results but the road to greatness is never easy There are a lot of different JavaScript MVC frameworks out there at the moment, and the battle between them is pretty fierce
Full transcript