The Future of the Front End, or: How I Learned to Stop Worrying and Love JavaScript

Transcript

1. The Future of the Front End or: How I Learned To Stop Worrying And Love JavaScript
2. About me @iangreenleaf Full-stack Rails developer Hire me! dev@iangreenleaf.com I wrote a book on CoffeeScript: http://goo.gl/5WtQdg
3. Predicting the future...
4. Reality
5. Internet Explorer is not going away
6. Poll
7. Internet Explorer is not going away
8. Mobile is the new IE
9. We're never getting rid of JavaScript Or CSS Or HTML
10. Standards will never be standard
11. A way forward
12. The dark ages
13. jQuery
14. jQuery was a watershed moment
15. $ ( " . m y - c l a s s " ) ;
16. / / C h e c k i f g e t E l e m e n t s B y C l a s s N a m e c a n b e t r u s t e d a s s e r t U s a b l e C l a s s N a m e = a s s e r t ( f u n c t i o n ( d i v ) { / / O p e r a c a n ' t f i n d a s e c o n d c l a s s n a m e ( i n 9 . 6 ) d i v . i n n e r H T M L = " & l a n g ; d i v c l a s s = ' h i d d e n e ' & r a n g ; & l a n g ; / d i v & r a n g ; & l a i f ( ! d i v . g e t E l e m e n t s B y C l a s s N a m e | | ! d i v . g e t E l e m e n t s B y C l a s s N a m e ( " e " ) r e t u r n f a l s e ; } / / S a f a r i 3 . 2 c a c h e s c l a s s a t t r i b u t e s a n d d o e s n ' t c a t c h c h a n g e s d i v . l a s t C h i l d . c l a s s N a m e = " e " ; r e t u r n d i v . g e t E l e m e n t s B y C l a s s N a m e ( " e " ) . l e n g t h = = = 2 ; } ) ,
17. $ ( " . m y - c l a s s " ) ;
18. jQuery is great, but a little long in the tooth
19. Solution: compiled languages!
20. New Language --> Compiler --> HTML/CSS/JavaScript
21. JavaScript/CSS/HTML is the new bytecode Backwards compatible Reasonably powerful Awful to write by hand
22. SCSS (née Sass)
23. a { c o l o r : # 4 8 4 C 5 5 ; }
24. $ l i n k - c o l o r : # 4 8 4 C 5 5 ; a { c o l o r : $ l i n k - c o l o r ; }
25. $ l i n k - c o l o r : # 4 8 4 C 5 5 ; a { c o l o r : $ l i n k - c o l o r ; } a : h o v e r { c o l o r : $ l i n k - c o l o r + # 4 4 4 ; }
26. . n a v - b a r { a { c o l o r : b l a c k ; } }
27. @ m i x i n h i g h l i g h t e d { b a c k g r o u n d - c o l o r : y e l l o w ; f o n t - s t y l e : i t a l i c ; } p . c a l l o u t { @ i n c l u d e h i g h l i g h t e d ( ) ; }
28. SCSS + Compass
29. . a v a t a r { / / N o ! ! ! - w e b k i t - b o r d e r - r a d i u s : 5 ; - m o z - b o r d e r - r a d i u s : 5 ; b o r d e r - r a d i u s : 5 ; }
30. . a v a t a r { / / Y e s s ! ! ! @ i n c l u d e b o r d e r - r a d i u s ( 5 ) ; }
31. Haml
32. # n a v - b a r . d r o p d o w n % u l . n a v - l i n k s % l i H o m e % l i A b o u t
33. CoffeeScript
34. n u m = M a t h . p o w 2 , 3 i f t r u e = = t r u e c o n s o l e . l o g " T a u t o l o g y ! "
35. a n i m a l s = [ " d o g " , " c a t " , " b i r d " ] f o r a n i m a l i n a n i m a l s c o n s o l e . l o g a n i m a l
36. d o u b l e = ( n u m ) - > n u m * 2 d o u b l e ( 5 )
37. c l a s s A u t o m o b i l e h o n k : - > c o n s o l e . l o g " B e e p ! " c a r = n e w A u t o m o b i l e ( ) c a r . h o n k ( )
38. c l a s s P o l i c e C a r e x t e n d s A u t o m o b i l e h o n k : - > s u p e r c o n s o l e . l o g " W e e - o o w e e - o o ! "
39. d o c u m e n t . g e t E l e m e n t B y I d ( " n a v - b a r " ) . c l a s s N a m e
40. JavaScript
41. JavaScript ...well, ES6 to be precise
42. f o r ( l e t e l e m e n t o f [ 1 , 2 , 3 ] ) { c o n s o l e . l o g ( e l e m e n t ) ; }
43. c l a s s P o l i c e C a r e x t e n d s A u t o m o b i l e { h o n k ( ) { s u p e r ( ) ; c o n s o l e . l o g ( " W e e - o o w e e - o o ! " ) ; } }
44. i m p o r t { f i r s t N a m e , l a s t N a m e } f r o m ' . / a n o t h e r _ f i l e ' ;
45. ...and more
46. ClojureScript By way of Clojure
47. ( d e f a 5 ) ( + a 2 3 )
48. ( d e f s h o u t ( f n [ x ] ( . t o U p p e r C a s e x ) ) ) ( s h o u t " h e l l o " ) ( m a p s h o u t [ " h e l l o " " w o r l d " ] )
49. ( d e f s h o u t ( f n [ x ] ( . t o U p p e r C a s e x ) ) ) ( s h o u t " h e l l o " ) ( m a p s h o u t [ " h e l l o " " w o r l d " ] )
50. ( d e f f o o ( j s - o b j " b a r " " b a z " ) ) ; v a r f o o = { b a r : " b a z " } ; ( s e t ! ( . - b a r f o o ) " q u u x " ) ( d e f c l o j u r e - f o o ( j s - > c l j f o o ) ) ( c l j - > j s c l o j u r e - f o o )
51. asm.js
52. Can I use asm.js now? ...sorta. LLVM is a many-to-many compiler toolset Emscripten can go from LLVM to JavaScript C --(clang)--> LLVM --(Emscripten)--> asm.js
53. The best is yet to come
54. We're never getting rid of HTML/CSS/JavaScript ...but I don't care.
55. Fin