A loosely coupled front-end

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/

Be4d34a0c1926f75f805604085fa95f4?s=128

Klemens Gordon

April 13, 2016
Tweet

Transcript

  1. None
  2. A LOOSELY COUPLED FRONT-END

  3. KLEMENS SCHREIBER FULLSTACKWEBAPPLICATIONDEVELOPER FRONTENDLEAD AT KARRRIERE.AT *.js @thisisgordon k94n.com

  4. YO, WHAT IS KARRIERE.AT

  5. None
  6. None
  7. None
  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. ☄ ☄☄ ☄ ☄ ☄ ☄ ☄ ☄ <? <?

    <? <? <? <? <? <? <? <?
  18. None
  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

  43. None
  44. None
  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
  48. None
  49. ???

  50. THX src=http://adweekmag.tumblr.com

  51. MAHLZEIT!