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