Compiling Your Web Assets

Source available at: https://github.com/EllisV/slides-compile-web-assets

Transcript

1. COMPILING YOUR WEB ASSETS Eligijus Vitkauskas
2. ELIGIJUS VITKAUSKAS Software Developer at NFQ eligijus.vitkauskas@nfq.lt EllisV EligijusV   
3. WHO OF YOU ARE PHP developers (Symfony, Laravel, ...) Ruby developers (Ruby on Rails, Sinatra, ...) Python developers (Django, Flask, Pyramid, ...) Java developers (Play, Grails, ...) .NET developers
4. THINGS MODERN FRONTEND DEVELOPER SHOULD BE FAMILIAR WITH NodeJS Less or Sass with Compass (preferably Sass) Coffeescript RequireJS Bower Task runners (Grunt, Gulp, ...) Frameworks (Backbone, Ember, Angular, React, ...) Templating languages (Underscore, Handlebars, ...) Testing frameworks (mocha with chai, ...)
5. Javascript interpreter on your machine / / f i l e : h e l l o . j s f o r ( v a r i = 0 ; i < 2 ; i + + ) { c o n s o l e . l o g ( ' I l o v e J a v a s c r i p t ! ' ) ; } $ n o d e h e l l o . j s I l o v e J a v a s c r i p t ! I l o v e J a v a s c r i p t !
6. SASS Syntactically Awesome Style Sheets CSS with superpowers Originally is written in Ruby Has implementations in C and Node aswell
7. SCSS $ b r a n d - c o l o r : # f c 3 ; a { c o l o r : $ b r a n d - c o l o r ; & : h o v e r { c o l o r : d a r k e n ( $ b r a n d - c o l o r , 3 0 % ) ; } } . n a v { b a c k g r o u n d - c o l o r : $ b r a n d - c o l o r ; } a { c o l o r : # f c 3 ; } a : h o v e r { c o l o r : # 9 9 7 3 0 0 ; } . n a v { b a c k g r o u n d - c o l o r : # f c 3 ; }
8. SASS $ b r a n d - c o l o r : # f c 3 a c o l o r : $ b r a n d - c o l o r & : h o v e r c o l o r : d a r k e n ( $ b r a n d - c o l o r , 3 0 % ) . n a v b a c k g r o u n d - c o l o r : $ b r a n d - c o l o r a { c o l o r : # f c 3 ; } a : h o v e r { c o l o r : # 9 9 7 3 0 0 ; } . n a v { b a c k g r o u n d - c o l o r : # f c 3 ; }
9. COFFEESCRIPT ( ( $ ) - > ' u s e s t r i c t ' $ ( d o c u m e n t ) . o n ' c l i c k . d r o p d o w n . d a t a - a p i ' , ' . d r o p d o w n ' , ( e ) - > e . p r e v e n t D e f a u l t ( ) $ ( t h i s ) . t o g g l e ( ) ) ( w i n d o w . j Q u e r y ) ( f u n c t i o n ( $ ) { ' u s e s t r i c t ' ; r e t u r n $ ( d o c u m e n t ) . o n ( ' c l i c k . d r o p d o w n . d a t a - a p i ' , ' . d r o p d o w n ' , f u n c t i o n ( e ) { e . p r e v e n t D e f a u l t ( ) ; r e t u r n $ ( t h i s ) . s h o w ( ) ; } ) ; } ) ( w i n d o w . j Q u e r y ) ;
10. COFFEESCRIPT c l a s s A n i m a l c o n s t r u c t o r : ( n a m e ) - > @ n a m e = n a m e g e t N a m e : - > @ n a m e d o g = n e w A n i m a l ( ' P u f f y ' ) c o n s o l e . l o g " M y d o g s n a m e i s # { d o g . g e t N a m e ( ) } " ( f u n c t i o n ( ) { v a r A n i m a l , d o g ; A n i m a l = ( f u n c t i o n ( ) { f u n c t i o n A n i m a l ( n a m e ) { t h i s . n a m e = n a m e ; } A n i m a l . p r o t o t y p e . g e t N a m e = f u n c t i o n ( ) { r e t u r n t h i s . n a m e ; } ; r e t u r n A n i m a l ; } ) ( ) ; d o g = n e w A n i m a l ( ' P u f f y ' ) ; c o n s o l e . l o g ( " M y d o g s n a m e i s " + ( d o g . g e t N a m e ( ) ) ) ; } ) . c a l l ( t h i s ) ;
11. HTML WE WANT TO HAVE < ! d o c t y p e h t m l > < h t m l > < h e a d > < ! - - . . . - - > < l i n k r e l = " s t y l e s h e e t " h r e f = " / c s s / m a i n . c s s " > < ! - - O n l y o n e f i l e - - > < ! - - . . . - - > < / h e a d > < b o d y > < ! - - . . . - - > < s c r i p s r c = " / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / j q u e r y / 1 . 1 1 . 2 / j q u e r y . m i n . j s " > < / s c r i p > < s c r i p > w i n d o w . j Q u e r y | | d o c u m e n t . w r i t e ( ' < s c r i p s r c = " / j s / v e n d o r / j q u e r y - 1 . 1 1 . 2 . m i n . j s " > < \ / s c r i p > ' ) < / s c r i p > < s c r i p s r c = " / j s / m a i n . j s " > < / s c r i p > < ! - - O n l y o n e f i l e - - > < / b o d y > < / h t m l > I had to mispell script to scrip as markdown could not handle it Javascripts and stylesheets must be concatinated and minified
12. TOOLS TO HELP YOU ACHIEVE THAT Less/Sass/Compass if you preprocess your stylesheets Coffeescript if you use coffee syntax Concat Uglify But invoking them manually takes time and make you less happy
15. FALSE IMPRESSIONS ON JS TASK RUNNERS People think that Grunt is a monstrous tool which can do everything It actually is an API for writting commands. In most cases it only delegates tasks to other tools m o d u l e . e x p o r t s = f u n c t i o n ( g r u n t ) { g r u n t . r e g i s t e r T a s k ( ' m y - t a s k ' , f u n c t i o n ( ) { c o n s o l e . l o g ( ' I t i s t h a t s i m p l e ' ) ; } ) ; } ; $ g r u n t m y - t a s k R u n n i n g " m y - t a s k " t a s k I t i s t h a t s i m p l e D o n e , w i t h o u t e r r o r s .
16. COMPILING SASS WITH GRUNT / / f i l e : G r u n t f i l e . j s / / . . . g r u n t . i n i t C o n f i g ( { / / . . . c o m p a s s : { o p t i o n s : { s a s s D i r : ' < % = c o n f i g . i n % > / s t y l e ' , c s s D i r : ' < % = c o n f i g . o u t % > / c s s ' } , d e v : { o p t i o n s : { s o u r c e m a p : t r u e } } , p r o d : { o p t i o n s : { e n v i r o n m e n t : ' p r o d u c t i o n ' } } } , / / . . . g r u n t . l o a d N p m T a s k s ( ' g r u n t - c o n t r i b - c o m p a s s ' ) ; g r u n t . r e g i s t e r T a s k ( ' b u i l d ' , [ / / . . . ' c o m p a s s : p r o d ' / / . . . ] ) ; } ) , / / . . .
17. COMPILING SASS WITH GULP / / f i l e : g u l p f i l e . j s / / . . . g u l p . t a s k ( ' s t y l e s ' , f u n c t i o n ( ) { r e t u r n g u l p . s r c ( ' a p p / s t y l e s / m a i n . s c s s ' ) . p i p e ( $ . s o u r c e m a p s . i n i t ( ) ) . p i p e ( $ . s a s s ( { o u t p u t S t y l e : ' n e s t e d ' , p r e c i s i o n : 1 0 , i n c l u d e P a t h s : [ ' . ' ] , o n E r r o r : c o n s o l e . e r r o r . b i n d ( c o n s o l e , ' S a s s e r r o r : ' ) } ) ) . p i p e ( $ . s o u r c e m a p s . w r i t e ( ) ) . p i p e ( g u l p . d e s t ( ' d i s t / s t y l e s ' ) ) ; } ) ; / / . . .
18. REFACTORING OLD PROJECT A demonstration on how to refactor your old project to show how easy this really is.
19. WHY WOULD I CONSIDER HAVING TASK RUNNER IN MY PROJECT IF I AM USING MODERN FRAMEWORK? Extracting asset compilation from you web application logic (more lean) Ability to have more than framework asset compilation could do, e.g. jshint, unit testing "Use Assetic to compile, combine and minimize web assets, unless you're comfortable with frontend tools like GruntJS." - Symfony2 Documentation
22. QUESTIONS?
23. WHO TO FOLLOW? nfq.lt smashingmagazine.com ZURBfoundation jQuery getbootstrap bower gruntjs yeoman nodejs EmberWatch backbone_js           