Modern front-end with the eyes of a PHP developer - Dutch PHP Conference 2014

Unless you're lucky (?) enough to work with PHP only, chances there that you deal also with HTML, CSS, and JavaScript. In the wild, PHP developers are supposed to know and be proficient at front-end too. For this reason, we should stay up-to-date and efficient in this field. Front-end is heavily changed in the last 2 years due to the introduction and the growth of tools like Grunt, Bower and Yeoman.

In this talk, you'll discover what they are and how they can help you to enhance your workflow, paying attention to highlight the similarities and the differences with their task-related PHP software.

Transcript

1. MODERN FRONT-END WITH THE EYES OF A PHP DEVELOPER Aurelio De Rosa Amsterdam, Netherlands - 28 June 2014
2. ABOUT ME (THE MOST BORING PART OF THE TALK!)
3. WEB & APP DEVELOPER Previously employed at the University of Salerno, I'm now self-employed.
4. PROJECTS I'VE CONTRIBUTED TO ... jQuery CanIUse PureCSS
5. WRITE ARTICLES FOR
6. AUTHORED BOOKS JQUERY IN ACTION (3RD EDITION) INSTANT JQUERY SELECTORS (Shameless self-promotion!)
7. QUESTIONS TIME!
8. HOW MANY FULL-STACK DEVELOPERS?
9. HOW MANY KNOW JAVASCRIPT?
10. LET'S START!
11. WE
12. BUT...
13. PEOPLE EXPECT HIGHLY INTERACTIVE WEBSITES
14. WEB ≅ PHP + HTML + CSS + JS
16. LUCKY ?
17. GOAL Compare PHP tools with front-end tools to understand the latter faster
18. LET THE UPGRADE BEGIN!
19. A TYPICAL PROJECT f o r ( i = 0 ; i < n ; i + + ) { / / C o d e h e r e }
20. A TYPICAL PROJECT SCAFFOLD DEVELOP TEST BUILD
21. DEPENDENCIES MANAGEMENT
22. UNLESS YOUR PROJECT LOOKS LIKE < ? p h p e c h o ' H e l l o w o r l d ! ' ; ? >
23. COMPOSER https://getcomposer.org
24. DEPENDENCY MANAGER FOR PHP
25. PACKAGES 1. Zend Framework 2. Simfony 3. Doctrine 4. Twig 5. Monolog 6. Swift Mailer 7. PHPUnit 8. Guzzle 9. Components for these projects 10. ...
26. BOWER
27. A PACKAGE MANAGER FOR THE WEB
28. PACKAGES 1. jQuery 2. jQuery UI 3. Normalize.css 4. Reset.css 5. Bootstrap 6. Angular.js 7. HTML5 Boilerplate 8. Backbone.js 9. Plugins for these projects 10. ...
30. SOUNDS FAMILIAR...
32. LIMITATIONS Only main libraries and frameworks Almost no plugins Not the right tool for the job™
33. DEPENDECY MANAGER: PHP VS JS & CSS Feature Composer Bower Config. format JSON JSON Dependency Package website Folder vendor bower_components Package structure v e n d o r / p r o j e c t p r o j e c t Main commands i n s t a l l , u p d a t e , s e a r c h i n s t a l l , u p d a t e , s e a r c h PHP Node.js Packagist Bower
34. DEVELOPMENT
35. WEB UI
36. HAVE YOU HEARD OF / ( S A | L E ) S S / ?
37. WTF IS THIS?
38. BASIC EXAMPLE (SASS) / * S a s s * / $ f o n t - s t a c k : H e l v e t i c a , s a n s - s e r i f $ g r e e n : # 7 5 B 7 3 C $ r e d : # F D 5 B 5 5 b o d y f o n t : 1 0 0 % $ f o n t - s t a c k c o l o r : $ g r e e n p b a c k g r o u n d - c o l o r : $ g r e e n c o l o r : $ r e d / * C o m p i l e d C S S * / b o d y { f o n t : 1 0 0 % H e l v e t i c a , s a n s - s e r i f ; c o l o r : # 7 5 b 7 3 c ; } p { b a c k g r o u n d - c o l o r : # 7 5 b 7 3 c ; c o l o r : # f d 5 b 5 5 ; }
39. WEB UI
40. WHAT ABOUT THE (FRONT-END) BUSINESS LOGIC?
41. BUSINESS LOGIC
42. DID YOU SAY TEST ?
43. CODE STYLE PHP CODE SNIFFER $ p h p c s - s / p a t h / t o / c o d e / m y f i l e . p h p F I L E : / p a t h / t o / c o d e / m y f i l e . p h p - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - F O U N D 5 E R R O R ( S ) A N D 1 W A R N I N G ( S ) A F F E C T I N G 5 L I N E ( S ) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 2 | E R R O R | M i s s i n g f i l e d o c c o m m e n t ( P E A R . C o m m e n t i n g . F i l e C o m m e n t ) 2 0 | E R R O R | P H P k e y w o r d s m u s t b e l o w e r c a s e ; e x p e c t e d " f a l s e " b u t f o u n d | | " F A L S E " ( G e n e r i c . P H P . L o w e r C a s e C o n s t a n t ) 4 7 | E R R O R | L i n e n o t i n d e n t e d c o r r e c t l y ; e x p e c t e d 4 s p a c e s b u t f o u n d 1 | | ( P E A R . W h i t e S p a c e . S c o p e I n d e n t ) 4 7 | W A R N I N G | E q u a l s s i g n n o t a l i g n e d w i t h s u r r o u n d i n g a s s i g n m e n t s | | ( G e n e r i c . F o r m a t t i n g . M u l t i p l e S t a t e m e n t A l i g n m e n t ) 5 1 | E R R O R | M i s s i n g f u n c t i o n d o c c o m m e n t | | ( P E A R . C o m m e n t i n g . F u n c t i o n C o m m e n t ) 8 8 | E R R O R | L i n e n o t i n d e n t e d c o r r e c t l y ; e x p e c t e d 9 s p a c e s b u t f o u n d 6 | | ( P E A R . W h i t e S p a c e . S c o p e I n d e n t ) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
44. CODE STYLE PSR-1 AND PSR-2
45. CODE QUALITY PHP MESS DETECTOR $ p h p m d . t e x t c o d e s i z e , u n u s e d c o d e / s r c / b a s e / M o d e l . p h p : 7 5 T h e m e t h o d _ _ t o A r r a y ( ) h a s a C y c l o m a t i c C o m p l e x i t y o f 1 2 . T h e c o n f i g u r e d c y c l o m a t i c c o m p l e x i t y t h r e s h o l d i s 1 0 . / s r c / c o n t r o l l e r / U s e r s . p h p : 2 3 5 A v o i d u n u s e d p a r a m e t e r s s u c h a s ' $ r e q u e s t ' . / s r c / c o n t r o l l e r / U s e r s . p h p : 2 4 6 A v o i d u n u s e d l o c a l v a r i a b l e s s u c h a s ' $ x ' . / s r c / c o n t r o l l e r / U s e r s . p h p : 2 4 6 A v o i d u n u s e d l o c a l v a r i a b l e s s u c h a s ' $ t e s t ' . / s r c / b a s e / C o n t r o l l e r . p h p U n e x p e c t e d t o k e n : [ , l i n e : 8 8 , c o l : 5 6 , f i l e : / s r c / b a s e / C o n t r o l l e r . p h p .
46. UNIT TESTING PHPUNIT p h p u n i t - - v e r b o s e D e p e n d e n c y F a i l u r e T e s t P H P U n i t 3 . 7 . 0 b y S e b a s t i a n B e r g m a n n . F S T i m e : 0 s e c o n d s , M e m o r y : 5 . 0 0 M b T h e r e w a s 1 f a i l u r e : 1 ) D e p e n d e n c y F a i l u r e T e s t : : t e s t O n e F a i l e d a s s e r t i n g t h a t f a l s e i s t r u e . / h o m e / s b / D e p e n d e n c y F a i l u r e T e s t . p h p : 6 T h e r e w a s 1 s k i p p e d t e s t : 1 ) D e p e n d e n c y F a i l u r e T e s t : : t e s t T w o T h i s t e s t d e p e n d s o n " D e p e n d e n c y F a i l u r e T e s t : : t e s t O n e " t o p a s s . F A I L U R E S ! T e s t s : 1 , A s s e r t i o n s : 1 , F a i l u r e s : 1 , S k i p p e d : 1 .
47. TESTING: PHP VS JAVASCRIPT Type PHP JavaScript Code style Code quality Unit testing PHP Code Sniffer JSLint PHP Mess Detector JSHint PHPUnit QUnit Other libraries worth looking at: , , Mocha Jasmine Phantom.js
48. EXAMPLE JSLINT (CODE) f u n c t i o n P e r s o n ( n a m e , s u r n a m e ) { v a r n a m e = n a m e ; _ s u r n a m e = s u r n a m e ; f u n c t i o n p r i n t N a m e ( ) { r e t u r n n a m e + ' ' + s u r n a m e ; } }
49. EXAMPLE JSLINT (RESULTS) M i s s i n g ' u s e s t r i c t ' s t a t e m e n t . v a r n a m e = n a m e ; l i n e 2 c h a r a c t e r 9 ' n a m e ' i s a l r e a d y d e f i n e d . v a r n a m e = n a m e ; l i n e 2 c h a r a c t e r 1 6 ' n a m e ' u s e d o u t o f s c o p e . v a r n a m e = n a m e ; l i n e 3 c h a r a c t e r 5 U n e x p e c t e d d a n g l i n g ' _ ' i n ' _ s u r n a m e ' . _ s u r n a m e = s u r n a m e ; l i n e 3 c h a r a c t e r 5 ' _ s u r n a m e ' w a s u s e d b e f o r e i t w a s d e f i n e d . _ s u r n a m e = s u r n a m e ; l i n e 6 c h a r a c t e r 5 E x p e c t e d e x a c t l y o n e s p a c e b e t w e e n ' ) ' a n d ' { ' . { l i n e 7 c h a r a c t e r 6 E x p e c t e d ' r e t u r n ' a t c o l u m n 1 3 , n o t c o l u m n 6 . r e t u r n n a m e + ' ' + s u r n a m e ; l i n e 8 c h a r a c t e r 5 E x p e c t e d ' } ' a t c o l u m n 9 , n o t c o l u m n 5 . }
50. EXAMPLE JSHINT (CODE) f u n c t i o n ( p a r a m ) { v a r m y A r r a y = n e w A r r a y ( ) ; m y O b j = n e w O b j e c t ( ) ; i f ( p a r a m = = n u l l ) { r e t u r n n u l l ; } f o r ( v a r i = 0 ; i < l . l e n g t h ; i + + ) { ( f u n c t i o n ( ) { / / D o s o m e t h i n g . . . } ) ( ) ; } }
51. EXAMPLE JSHINT (RESULTS) M e t r i c s T h e r e a r e 2 f u n c t i o n s i n t h i s f i l e . F u n c t i o n w i t h t h e l a r g e s t s i g n a t u r e t a k e 1 a r g u m e n t s , w h i l e t h e m e d i a n i s 0 . 5 . L a r g e s t f u n c t i o n h a s 6 s t a t e m e n t s i n i t , w h i l e t h e m e d i a n i s 3 . T h e m o s t c o m p l e x f u n c t i o n h a s a c y c l o m a t i c c o m p l e x i t y v a l u e o f 3 w h i l e t h e m e d i a n i s 2 . F i v e w a r n i n g s 1 M i s s i n g n a m e i n f u n c t i o n d e c l a r a t i o n . 2 T h e a r r a y l i t e r a l n o t a t i o n [ ] i s p r e f e r a b l e . 3 T h e o b j e c t l i t e r a l n o t a t i o n { } i s p r e f e r a b l e . 4 U s e ' = = = ' t o c o m p a r e w i t h ' n u l l ' . 1 0 D o n ' t m a k e f u n c t i o n s w i t h i n a l o o p . T w o u n d e f i n e d v a r i a b l e s 3 m y O b j 7 l T w o u n u s e d v a r i a b l e s 1 u n d e f i n e d 2 m y A r r a y
52. EXAMPLE QUNIT (CODE) f u n c t i o n i s E v e n ( v a l ) { r e t u r n v a l % 2 = = = 0 ; } t e s t ( ' i s E v e n ( ) ' , f u n c t i o n ( ) { o k ( i s E v e n ( 0 ) , ' Z e r o i s e v e n ' ) ; o k ( i s E v e n ( 2 ) , ' S o i s t w o ' ) ; o k ( ! i s E v e n ( 1 ) , ' O n e i s n o t e v e n ' ) ; o k ( ! i s E v e n ( 7 ) , ' S e v e n i s n o t e v e n ' ) ; o k ( i s E v e n ( 3 ) , ' T h r e e i s e v e n ' ) ; } )
53. EXAMPLE QUNIT (RESULTS)
54. BUILD
55. BUILD (BACKEND) 1. Configure 2. Move / Copy / Rename files 3. Test 4. (Optional) Package 5. Deploy
56. SO BORING...
57. AUTOMATION
58. PHING http://www.phing.info
59. A BUILD TOOL BASED ON ​ APACHE ANT
60. FRONT-END ISN'T MUCH DIFFERENT...
61. BUILD (FRONT-END) 1. Test JavaScript 2. (Optional) Compile Sass or Less 3. Concatenate CSS and JavaScript 4. Minify CSS, JavaScript and HTML 5. Create sprites of images 6. Optimize images 7. (Optional) Other project's specific tasks 8. Deploy
62. FRONT-END TOOLS Grunt.js Gulp.js Broccoli Brunch And much, much more...
64. A TASK RUNNER FOR JAVASCRIPT
65. AUTOMATION: PHING VS GRUNT Feature Phing Grunt Scope Build Develop + Build Config. format XML JavaScript Installation Config. file build.xml Gruntfile.js Terminology Target, Task, Property Target, Task, Property PEAR npm
66. MOST USED TASKS ... grunt-contrib-clean grunt-contrib-copy grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-csslint grunt-contrib-watch grunt-uncss grunt-contrib-jshint grunt-contrib-uglify grunt-contrib-imagemin grunt-contrib-htmlmin
67. GRUNT WATCH IS FOR
68. GRUNT WATCH IS FOR
69. GRUNT UNCSS CAN DO
70. EXAMPLE 1 - CONCAT g r u n t . i n i t C o n f i g ( { c o n c a t : { d i s t : { s r c : [ ' s r c / f i r s t . j s ' , ' s r c / s e c o n d . j s ' , ' s r c / t h i r d . j s ' ] , d e s t : ' d i s t / b u i l t . j s ' } } } ) ;
71. EXAMPLE 2 - UGLIFY g r u n t . i n i t C o n f i g ( { u g l i f y : { d i s t { f i l e s : { ' d e s t / o u t p u t . m i n . j s ' : [ ' s r c / i n p u t 1 . j s ' , ' s r c / i n p u t 2 . j s ' ] } } } } ) ;
72. I HAVE ASSETIC!
73. CONSIDERATIONS You're mixing different environments (will you lint your JS via PHP ?) It doesn't come with all you need (e.g. the YUI compressor) Several filters aren't from the official vendors (e.g. JSLint) Several filters are just wrapper for Node.js modules (e.g. JSHint) Front-end engineers have less control over the process ...and they should understand PHP Make harder to optmize performance (multiple places to look)
74. ME...SOMETIMES
75. LESSON: DON'T USE THINGS THAT PRETEND TO BE OTHERS
76. IT'S NOT ALL ABOUT BUILDING TOOLS
77. SCAFFOLDING
78. PHP ECOSYSTEM HAS LIMITS
79. 1 FRAMEWORK = 1 SCAFFOLDING SYSTEM Not valid for all the frameworks
80. JAVASCRIPT ECOSYSTEM HAS MOVED A STEP FORWARD
81. YO
82. CLI TOOL FOR SCAFFOLDING
83. SETUP A PROJECT USING GENERATORS
84. GENERATORS ... WebApp Ember Angular.js Backbone Chrome-extension jQuery (plugin) Cordova BUT ALSO...
85. GENERATORS ... Symfony 2 WordPress Magento Phalcon Laravel Slim
87. CREATE A WEB APP IN 4 STEPS WITH YO 1. Install 2. $ n p m i n s t a l l - g y o 3. $ n p m i n s t a l l - g g e n e r a t o r - w e b a p p 4. $ y o w e b a p p Node.js DONE!
89. HEY, WHAT HAPPENED TO THAT YEO...SOMETHING ?
90. YEOMAN
91. A WORKFLOW MADE OF
93. CONCLUSIONS Front-end has become complex ...but tools can help us Scaffold with Yo Manage dependencies with Bower Test and build with Grunt
94. PHP!
95. YEOMAN!
96. THE WEB!
97. THANK YOU!
98. QUESTIONS?
99. CONTACTS Website: Email: Twitter: www.audero.it a.derosa@audero.it @AurelioDeRosa