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

1. View Slide

2. A
   LOOSELY COUPLED
   FRONT-END
   

   View Slide

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

   View Slide

4. YO,
   WHAT IS
   KARRIERE.AT
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. KARRIERE.AT
   IS MORE THAN
   KARRIERE.AT
   

   View Slide

9. JOBS.AT
   

   View Slide

10. BRANCH-SPECIFIC SITES
    

    View Slide

11. HR-BLOG
    

    View Slide

12. B2B
    

    View Slide

13. KARRIERE.AT
    

    View Slide

14. KEY PRINCIPLES
    OF OUR
    FRONT-ENDS
    

    View Slide

15. BUILD FOR SPEED
    RESPONSIVE
    VANILLA.JS
    LARAVEL
    

    View Slide

16. There is an elephant in the
    middle of the stack.
    

    View Slide

17. ☄
    
    
    ☄☄
    ☄
    ☄
    ☄
    ☄
    ☄
    ☄
    
    
    
    
    
    
    
    
    
    

    View Slide

18. View Slide

19. MPAs
    Server controls routing and permissioning.
    Javascript take over once the page is loaded
    to enhance a the user experience.
    

    View Slide

20. KARRIERE.AT
    FROM 3 TO 4
    WE DON’T SKIP MAJOR VERSIONS
    #PHP #Windows #ElasticSearch
    

    View Slide

21. http://gif-database.tumblr.com
    

    View Slide

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/
    

    View Slide

23. KFC
    KARRIERE.AT
    FRONT-END
    CORE
    http://giphy.com/kfcaustralia
    

    View Slide

24. 3
    CHALLENGES
    +TAKEAWAYS
    

    View Slide

25. 1. CLIENT TEMPLATES
    

    View Slide

26. THE PROBLEM
    “partial updating client ui“
    “blade only exists on server”
    

    View Slide

27. APPROACHES
    LARAVEL + HARD LINKS
    LARAVEL as API + SPA
    

    View Slide

28. OLD IMPLEMENTATION
    

    View Slide

29. LARAVEL BLADE - VS - HBS
    

    View Slide

30. LARAVEL BLADE - VS - HBS
    

    View Slide

31. HANDLEBARS IMPLEMENTATION
    

    View Slide

32. TAKEAWAYS
    Great server to frontend bridge
    Feels like a subset of blade
    Save a lot of data over the wire
    Precompile for distribution
    

    View Slide

33. 2. MODULAR CSS
    

    View Slide

34. THE PROBLEM
    “Mimimi … cannot reuse dat CSS”
    

    View Slide

35. COUPLED CSS-HTML EXAMPLE
    ul#featuredCompanies li .footer button.companyFollowButton {}
    

    View Slide

36. MODIFIER
    .companyCard-logo--premium {}
    ELEMENT
    .companyCard-logo {}
    BEM 1X1
    BLOCK
    .companyCard {}
    

    View Slide

37. DECOUPLED CSS-HTML EXAMPLE
    .companyCard {}
    .companyCard-followButton {}
    .followButton {}
    

    View Slide

38. TAKEAWAYS
    Reusable components are hot
    Selector are fast (~ 1 level)
    OOCSS, BEM, SMACSS, WTFCSS
    Naming can be applied in full frontend stack
    

    View Slide

39. 3. BUNDLING
    A
    M1 M2 M3
    B COMMON
    

    View Slide

40. THE PROBLEMS
    “Manual bundling is hard”
    “More people more saustall”
    “2 dependency-trees (css/js)”
    

    View Slide

41. CURRENT DEPENDENCIES
    

    View Slide

42. CURRENT BUNDLES
    Modules on demand
    Entry Bundles
    

    View Slide

43. View Slide

44. View Slide

45. MODULE EXAMPLE
    

    View Slide

46. TAKEAWAYS
    Everything is a module
    ES6 (Modules) FTW!
    Easy sourcemaps
    Shared code bundles are easy
    

    View Slide

47. DEV TOOLS: THE LAB
    
    developing, learning,
    testing and sharing in team
    

    View Slide

48. View Slide

49. ???
    
    

    View Slide

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

    View Slide

51. MAHLZEIT!
    

    View Slide