Rethinking the Client vs. Server Rendering Debate

Slide 1

Slide 1 text

Rethinking the Client vs. Server Rendering Debate Rebecca Miller-Webster @rmillerwebster rebeccamiller-webster.com ! @devbootcamp

Slide 2

Slide 2 text

Server JavaScript MVC - Ember, Backbone, Angular etc JavaScript templates - Mustache, Underscore, etc jQuery + DOM manipulation w/ JSON Client Full page rendering; full page refresh Turbolinks PJAX jQuery + DOM manipulation Server returns HTML Server returns JSON

Slide 3

Slide 3 text

Daddy Papa VS.

Slide 4

Slide 4 text

Server Fast! Clear conventions Organization and Structure Reusable components Good UX for basic CRUD Easier to test Client Fast! Easier to cache Always show canonical data Less client/server code duplication Easier to test

Slide 5

Slide 5 text

Server Client FEAR of Front-End NEW!! THE WAY (TM) ONWARD TO THE FUTURE

Slide 6

Slide 6 text

Real World == Hybrid HTML fragment inserted into DOM JS MVC model for JS component Single-page full MVC on some pages Per feature

Slide 7

Slide 7 text

What’s better for YOU ?

Slide 8

Slide 8 text

Solve YOUR Problem What’s the problem your trying to solve? Priority Timing How does this ﬁt in with goals of the company?

Slide 9

Slide 9 text

Right Tool for the Job Data: authority; present in multiple ways on the same page; reads vs. writes; size; store and respond to state Rendering: how much; single or many pages; need to display on-load; complexity; presentation based on state UX: importance of page load; user expectations; interactivity; devices; security

Slide 10

Slide 10 text

Right Tools for your Team What’s your existing tools, conventions. organization? What tools do your people know? Time for spike and knowledge transfer? What do people want?

Slide 11

Slide 11 text

Iterate and Enforce Discipline Clear Expectations and Practices Code Styleguides Code Reviews/Pull Requests

Slide 12

Slide 12 text

Your Problem is a People Problem

Slide 13

Slide 13 text

Thank You ? @rmillerwebster ! @devbootcamp is hiring!

Slide 14

Slide 14 text

http://www.forbes.com/sites/quora/2013/07/10/web-development-what-are-the-tradeoffs-of-client- side-rendering-vs-server-side-rendering/ http://blog.mwaysolutions.com/2013/11/08/client-vs-serverside-rendering-the-big-battle-2/ http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/ http://mrjoelkemp.com/2013/11/learnings-from-client-side-and-server-side-rendering-in-backbone-js/ https://medium.com/tech-talk/7e0831bc19bc http://patnakajima.com/javascript-talk-i-kinda-gave/#30 http://openmymind.net/Client-Side-vs-Server-Side-Rendering-Redux-Sorta/ http://signalvnoise.com/posts/3112-how-basecamp-next-got-to-be-so-damn-fast-without-using- much-client-side-u http://signalvnoise.com/posts/3697-server-generated-javascript-responses