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/
View Slide
ALOOSELY COUPLEDFRONT-END
KLEMENS SCHREIBERFULLSTACKWEBAPPLICATIONDEVELOPERFRONTENDLEAD AT KARRRIERE.AT *.js@thisisgordon k94n.com
YO,WHAT ISKARRIERE.AT
KARRIERE.ATIS MORE THANKARRIERE.AT
JOBS.AT
BRANCH-SPECIFIC SITES
HR-BLOG
B2B
KARRIERE.AT
KEY PRINCIPLESOF OURFRONT-ENDS
BUILD FOR SPEEDRESPONSIVEVANILLA.JSLARAVEL
There is an elephant in themiddle of the stack.
☄☄☄☄☄☄☄☄☄
MPAsServer controls routing and permissioning.Javascript take over once the page is loadedto enhance a the user experience.
KARRIERE.ATFROM 3 TO 4WE DON’T SKIP MAJOR VERSIONS#PHP #Windows #ElasticSearch
http://gif-database.tumblr.com
http://www.gifbay.com/gif/the_prototype_is_ready-155859/PROSTHETICKNOWLEDGE.TUMBLR.COMr/reactiongifs http://www.funnyjunk.com/Fail+gifs/funny-gifs/5325691/
KFCKARRIERE.ATFRONT-ENDCOREhttp://giphy.com/kfcaustralia
3CHALLENGES+TAKEAWAYS
1. CLIENT TEMPLATES
THE PROBLEM“partial updating client ui““blade only exists on server”
APPROACHESLARAVEL + HARD LINKSLARAVEL as API + SPA
OLD IMPLEMENTATION
LARAVEL BLADE - VS - HBS
HANDLEBARS IMPLEMENTATION
TAKEAWAYSGreat server to frontend bridgeFeels like a subset of bladeSave a lot of data over the wirePrecompile for distribution
2. MODULAR CSS
THE PROBLEM“Mimimi … cannot reuse dat CSS”
COUPLED CSS-HTML EXAMPLEul#featuredCompanies li .footer button.companyFollowButton {}
MODIFIER.companyCard-logo--premium {}ELEMENT.companyCard-logo {}BEM 1X1BLOCK.companyCard {}
DECOUPLED CSS-HTML EXAMPLE.companyCard {}.companyCard-followButton {}.followButton {}
TAKEAWAYSReusable components are hotSelector are fast (~ 1 level)OOCSS, BEM, SMACSS, WTFCSSNaming can be applied in full frontend stack
3. BUNDLINGAM1 M2 M3B COMMON
THE PROBLEMS“Manual bundling is hard”“More people more saustall”“2 dependency-trees (css/js)”
CURRENT DEPENDENCIES
CURRENT BUNDLESModules on demandEntry Bundles
MODULE EXAMPLE
TAKEAWAYSEverything is a moduleES6 (Modules) FTW!Easy sourcemapsShared code bundles are easy
DEV TOOLS: THE LABdeveloping, learning,testing and sharing in team
???
THX src=http://adweekmag.tumblr.com
MAHLZEIT!