$30 off During Our Annual Pro Sale. View Details »

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/

Klemens Gordon

April 13, 2016
Tweet

More Decks by Klemens Gordon

Other Decks in Technology

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