A loosely coupled front-end

This talk is about concepts and technologies used to build the fourth iteration of karriere.at - Flexible and solid front-end components based on BEM, HBS and Webpack.

http://www.wearedevelopers.org/

Transcript

2. A LOOSELY COUPLED FRONT-END
3. KLEMENS SCHREIBER FULLSTACKWEBAPPLICATIONDEVELOPER FRONTENDLEAD AT KARRRIERE.AT *.js @thisisgordon k94n.com
4. YO, WHAT IS KARRIERE.AT
8. KARRIERE.AT IS MORE THAN KARRIERE.AT
9. JOBS.AT
10. BRANCH-SPECIFIC SITES
11. HR-BLOG
12. B2B
13. KARRIERE.AT
14. KEY PRINCIPLES OF OUR FRONT-ENDS
15. BUILD FOR SPEED RESPONSIVE VANILLA.JS LARAVEL
16. There is an elephant in the middle of the stack.
17. ☄ ☄☄ ☄ ☄ ☄ ☄ ☄ ☄ <? <? <? <? <? <? <? <? <? <?
19. MPAs Server controls routing and permissioning. Javascript take over once the page is loaded to enhance a the user experience.
20. KARRIERE.AT FROM 3 TO 4 WE DON’T SKIP MAJOR VERSIONS #PHP #Windows #ElasticSearch
21. http://gif-database.tumblr.com
22. http://www.gifbay.com/gif/the_prototype_is_ready-155859/ PROSTHETICKNOWLEDGE.TUMBLR.COM r/reactiongifs http://www.funnyjunk.com/Fail+gifs/funny-gifs/5325691/
23. KFC KARRIERE.AT FRONT-END CORE http://giphy.com/kfcaustralia
24. 3 CHALLENGES +TAKEAWAYS
25. 1. CLIENT TEMPLATES
26. THE PROBLEM “partial updating client ui“ “blade only exists on server”
27. APPROACHES LARAVEL + HARD LINKS LARAVEL as API + SPA
28. OLD IMPLEMENTATION
29. LARAVEL BLADE - VS - HBS
30. LARAVEL BLADE - VS - HBS
31. HANDLEBARS IMPLEMENTATION
32. TAKEAWAYS Great server to frontend bridge Feels like a subset of blade Save a lot of data over the wire Precompile for distribution
33. 2. MODULAR CSS
34. THE PROBLEM “Mimimi … cannot reuse dat CSS”
35. COUPLED CSS-HTML EXAMPLE ul#featuredCompanies li .footer button.companyFollowButton {}
36. MODIFIER .companyCard-logo--premium {} ELEMENT .companyCard-logo {} BEM 1X1 BLOCK .companyCard {}
37. DECOUPLED CSS-HTML EXAMPLE .companyCard {} .companyCard-followButton {} .followButton {}
38. TAKEAWAYS Reusable components are hot Selector are fast (~ 1 level) OOCSS, BEM, SMACSS, WTFCSS Naming can be applied in full frontend stack
39. 3. BUNDLING A M1 M2 M3 B COMMON
40. THE PROBLEMS “Manual bundling is hard” “More people more saustall” “2 dependency-trees (css/js)”
41. CURRENT DEPENDENCIES
42. CURRENT BUNDLES Modules on demand Entry Bundles
45. MODULE EXAMPLE
46. TAKEAWAYS Everything is a module ES6 (Modules) FTW! Easy sourcemaps Shared code bundles are easy
47. DEV TOOLS: THE LAB developing, learning, testing and sharing in team
49. ???
50. THX src=http://adweekmag.tumblr.com
51. MAHLZEIT!