model, view, whatever
TRANSCRIPT
![Page 1: Model, View, Whatever](https://reader030.vdocuments.site/reader030/viewer/2022020208/55b7f3afbb61ebdd1b8b466f/html5/thumbnails/1.jpg)
Model, View, Whatever.
*Document Object Model - not me!
or how I learned to stop worrying and love the DOM*
![Page 2: Model, View, Whatever](https://reader030.vdocuments.site/reader030/viewer/2022020208/55b7f3afbb61ebdd1b8b466f/html5/thumbnails/2.jpg)
We ♥
Single PageApplications
![Page 3: Model, View, Whatever](https://reader030.vdocuments.site/reader030/viewer/2022020208/55b7f3afbb61ebdd1b8b466f/html5/thumbnails/3.jpg)
• Complex UI
• Feel really fast
• Comparable to native mobile apps
• Can work offline
• Cool MVC MVW frameworks galore
![Page 4: Model, View, Whatever](https://reader030.vdocuments.site/reader030/viewer/2022020208/55b7f3afbb61ebdd1b8b466f/html5/thumbnails/4.jpg)
But…
![Page 5: Model, View, Whatever](https://reader030.vdocuments.site/reader030/viewer/2022020208/55b7f3afbb61ebdd1b8b466f/html5/thumbnails/5.jpg)
![Page 6: Model, View, Whatever](https://reader030.vdocuments.site/reader030/viewer/2022020208/55b7f3afbb61ebdd1b8b466f/html5/thumbnails/6.jpg)
• Javascript :(
• Initial page load
• Duplicated code
• < noscript />
• IE <9 Internet Explorer
• Deep linking
• Error handling
• SEO
![Page 7: Model, View, Whatever](https://reader030.vdocuments.site/reader030/viewer/2022020208/55b7f3afbb61ebdd1b8b466f/html5/thumbnails/7.jpg)
Another way is possible.
![Page 8: Model, View, Whatever](https://reader030.vdocuments.site/reader030/viewer/2022020208/55b7f3afbb61ebdd1b8b466f/html5/thumbnails/8.jpg)
![Page 9: Model, View, Whatever](https://reader030.vdocuments.site/reader030/viewer/2022020208/55b7f3afbb61ebdd1b8b466f/html5/thumbnails/9.jpg)
• Render a full working web page on the server
• For all routes, not just the first hit of index page
• Bind SPA afterwards
• SPA uses the same markup
• Client and server use same templates
![Page 10: Model, View, Whatever](https://reader030.vdocuments.site/reader030/viewer/2022020208/55b7f3afbb61ebdd1b8b466f/html5/thumbnails/10.jpg)
• Real forms!
• Real links!
• No duplicated templates!
• No white screen of death!
• Error recovery for free!
• Cheap integration tests!
• Maximum dev gibberish: Isomorphic Application
![Page 11: Model, View, Whatever](https://reader030.vdocuments.site/reader030/viewer/2022020208/55b7f3afbb61ebdd1b8b466f/html5/thumbnails/11.jpg)
![Page 12: Model, View, Whatever](https://reader030.vdocuments.site/reader030/viewer/2022020208/55b7f3afbb61ebdd1b8b466f/html5/thumbnails/12.jpg)
Dom Barker Software Engineer @ Quill Content
@mostlyharmlessd www.dombarker.co.uk
www.github.com/dakuan www.npmjs.com/~dakuan