Rendering Web Applications

Overview of what it means to do server rendering and client rendering. Covers the differences and considerations between the two rendering techniques.

Transcript

1. Rendering Web Applications Server and Client rendering
2. Gastón I. Silva @givanse http://givan.se
3. HTML • HyperText Markup Language • 1980 - 1994 ◦ Markup for using and sharing documents • 1995 HTML 2.0 ◦ First Standard
4. Static and Dynamic CERN Top Secret Paper Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Pag. 1/10 Welcome Gastón! 14 - Jul - 2015 CERN Top Secret Paper Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Pag. 1/10
5. Static
6. Dynamic
7. Dynamic web pages • 1993 CGI ◦ Common Gateway Interface • Execute a script that writes to stdout • 1995 PHP ◦ Hypertext Preprocesor • Can be mixed with HTML
8. Spaghetti mountain • Code duplication • Includes everywhere • Files in arbitrary folders
9. Frameworks (MVC) Server • 2000 Struts • 2001 Drupal • 2004 Rails Client • 2007 Sproutcore • 2009 Angular • 2010 Backbone • 2011 Ember
10. Server and Client rendered
11. Old Assumptions • JavaScript is slow. • A server will always be much more powerful than a user device. • Mobile devices are slow. • Browsers have serious compatibility issues. no longer true
12. Considerations Server • Can cache requests ◦ don’t take for granted • Comparable payloads with compression. • Every new page will make a round trip. Client • Small payloads • “Slow” initial render • Instant screen updates. • SEO • Two code bases
13. Client: SEO • Google executes JS • Prerender.io • Ember & Fastboot
14. Client: Code duplication The most obvious case is data validation. • Server side is a security layer. • Client side is just nice UX. You have to maintain both.
15. Isomorphic Server and Client rendering with the same code. Thoughts • Separation of concerns • Backend/Frontend flexibility • There are other answers for code duplication.
16. Who is the winner? The developers. Choose the right tool for the right job. Example: Improving performance in Twitter. com