Download as PDF, PPTX
![INDEX.HTML
<!doctype html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Frontend Home Page</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/frontend-web/stylesheets/app.css">
<script src="/frontend-web/javascripts/vendor.js"></script>
<script src="/frontend-web/javascripts/app.js"></script>
<script> </script>
</head>
<body>
</body>
</html>
require('initialize');](https://image.slidesharecdn.com/frontendvsbackend-gettingtherightmix-130821132525-phpapp01/75/Frontend-vs-Backend-Getting-the-Right-Mix-30-2048.jpg)
More Related Content
![第一次用 Vue.js 就愛上 [改]](https://cdn.slidesharecdn.com/ss_thumbnails/vuejs-160518081021-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Frontend 'vs' Backend Getting the Right Mix
Frontend 'vs' Backend Getting the Right Mix
- 1. FRONTEND 'VS' BACKEND GETTINGTHE RIGHT MIX Created by / /Bob Paulin @bobpaulin bob@bobpaulin.com
- 2. ABOUT ME Independent Consultant BusinessEnablement Web Centric
- 3. A LONG TIMEAGO I CREATED "FACEBOOK" College students love seeing pictures of their friends doing stupid things at parties Photoshop can be used to make funny pictures even more funny Do not host anything on your school's web property
- 4. WHAT THIS TALKIS NOT Deep Dive into web frameworks THE answer on which architecture is better
- 5. WHAT THIS TALKIS Using Frontend and Backend frameworks together How developers work together Advantages and disadvantages of architectures Some empirical data on architecture performance
- 6. HOW DID WEGET HERE? Complexity Corporate Culture Developer Aptitudes
- 7.
- 8. TYPICAL BACKEND DEVELOPERS Focuson the server side Data Storage and Retrieval System Architecture Availability Does it work?
- 9.
- 10. TYPICAL FRONTEND DEVELOPERS Client/Browserfocused Information Architecture Closer to creative/design Does it look right?
- 11. DOES THIS MODELACTUALLY WORK?
- 12.
- 13.
- 14.
- 15. FRAMEWORKS OFTEN COUPLEFRONTEND AND BACKEND TECHNOLOGIES
- 16. ANOTHER WAY TOTHINK ABOUT THE PROBLEM... AN AMERICAN FOOTBALL ANALOGY
- 17. FRONTEND DEVELOPERS =OFFENSIVE BACKS
- 18. FRONTEND DEVELOPERS =OFFENSIVE BACKS Score Points with Customers Work is highly visible Can be limited by poor play at other positions Often get the biggest share of blame when things go wrong and praise when things go right
- 19. BACKEND DEVELOPERS =OFFENSIVE LINE
- 20. BACKEND DEVELOPERS =OFFENSIVE LINE Enable other positions to do great work Work is not usually visible Mistakes often have a cascading effect Generally only get blamed when things go wrong. When things go right .... well things are just suppose to work all the time right?
- 21. OK ENOUGH ABOUTYOUR PEOPLE PROBLEMS LETS LOOK AT SOME CODE ALREADY!
- 22. 3 DIFFERENT APPROACHESTO THE SAME WEB SITE REQUIREMENTS - A BOOK REVIEW SITE Allow users to select keyword preferences Allow users to view and post review comments about a specific book Should use responsive design. Because, well, that's the hot new thing right?
- 23. A BACKEND RECIPE SpringMVC Spring Data MongoDB Apache Tomcat Apache Http Server JSP Twitter Bootstrap WRO4J Amazon Cloudfront (CDN)
- 24. DESIGN Cache Google ApiResponse for Books and Book Search Consolidate and minify CSS and JS using WRO4J Page turn between Homepage and Reviews Page can't be cached but static resources can
- 25. CODE Spring MVC Controller SpringData Services WRO4J Config
- 26.
- 27. A FRONTEND RECIPE Brunch ChaplinJS CoffeeScript Handlebars Node.js ApacheCXF Spring Data MongoDB Apache Tomcat Apache Http Server Twitter Bootstrap Amazon Cloudfront (CDN)
- 28. DESIGN All Services aredone through AJAX Apache CXF Provides Restful Services(Consumers/Producers) JAX-RS Single Page Application Behavior via Chaplin Node.js but only for Brunch Compilation All pages and frontend code cached Some Data Services Cached: Volatile vs Static
- 29. CODE index.html - LookMa, only 16 lines of server side html! Chaplin Controller Chaplin Views Chaplin Models Handlebars Templates Apache CXF JAX-RS
- 30. INDEX.HTML <!doctype html> <!--[if IE8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Frontend Home Page</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="/frontend-web/stylesheets/app.css"> <script src="/frontend-web/javascripts/vendor.js"></script> <script src="/frontend-web/javascripts/app.js"></script> <script> </script> </head> <body> </body> </html> require('initialize');
- 31.
- 32. A MIXED RECIPE FRONTENDTECH Backbone CoffeeScript Handlebars Twitter Bootstrap BACKEND TECH Spring MVC Handlebars.java WRO4J Apache CXF Spring Data MongoDB Apache Tomcat Apache Http Server Amazon Cloudfront (CDN)
- 33. DESIGN Some Services aredone through AJAX others on Serverside Apache CXF Provides Restful Services(Consumers/Producers) JAX-RS Page turn between Homepage and Reviews Page can't be cached but static and service resources can Page actions do not require page turns Templates are shared between frontend and backend Book Searches are cached with data URIs
- 34.
- 35.
- 36. TEST DESIGN Web PageTest Browser - Current Chrome Location - Virgina Click events tested locally using Chrome Developer Tools
- 37. TEST SCRIPT 1. HomepageView 2. Add a New Book Preference 3. Open a Review 4. Add A Comment
- 39.
- 40.
- 41.
- 44.
- 45.
- 46.
- 50. DISCUSSION What does thisdata tell us? What does it not tell us? Which is most scalable? Variations between Browsers
- 51.
- 52. BACKEND SUMMARY Most consistantload times Better performance with static data Less requests Full page loads for incremental changes can prevent optimal performance Data is embedded within the page so it can't be separated into different TTL Dynamic content within the JSP prevents pages from being cached. Increases traffic to the origin
- 53. FRONTEND SUMMARY Requests handledindependently. Enables fine grain caching Eliminates page turns to refesh data model Significant caching opportunities at the edge Generates more requests Higher memory and CPU consumption on the client end
- 54. MIXED SUMMARY Allows themost flexibility in how information is loaded Code reuse at the template level Eliminates some page turns related to data updates Performance suffers when both page and services are volatile (non-cachable)
- 55. REFERENCES CODE AND PRESENTATION Frontend"vs" Backend FRONTEND BackboneJS Brunch ChaplinJS CoffeeScript Handlebars Twitter Bootstrap BACKEND Apache CXF Handlebars.java MongoDB Spring Data Spring MVC WRO4J
- 56. BOB PAULIN / /BOBPAULIN @BOBPAULIN BOB@BOBPAULIN.COM