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!