Modern front-end with the eyes of a PHP developer - 4Developers 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 Yo.

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 Warsaw, Poland - - 7 April 2014 4Developers
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. THE LANGUAGES I USE
5. WRITE ARTICLES FOR
6. AUTHORED BOOKS JQUERY IN ACTION (3RD EDITION) INSTANT JQUERY SELECTORS (Shameless self-promotion!)
7. BEFORE WE START...
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. SO
15. WEB ≅ PHP + HTML + CSS + JS
17. LUCKY ?
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. DEVELOP
22. WEB UI
23. HAVE YOU HEARD OF / ( S A | L E ) S S / ?
24. WTF IS THIS?
25. 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 ; }
26. WEB UI
27. WHAT ABOUT THE (FRONT-END) BUSINESS LOGIC?
28. BUSINESS LOGIC
29. DID YOU SAY TEST ?
30. 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 ) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
31. CODE STYLE PSR-1 AND PSR-2
32. 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 .
33. 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 .
34. 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
35. 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 ; } }
36. 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 . }
37. 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 . . . } ) ( ) ; } }
38. 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 2 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 . 1 3 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 . 1 4 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 . 1 5 U s e ' = = = ' t o c o m p a r e w i t h ' n u l l ' . 2 1 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 1 4 m y O b j 1 8 a N o d e L i s t T w o u n u s e d v a r i a b l e s 1 2 u n d e f i n e d 1 3 m y A r r a y
39. 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 ' ) ; } )
40. EXAMPLE QUNIT (RESULTS)
41. BUILD
42. BUILD (BACKEND) 1. Configure 2. Move / Copy / Rename files 3. Test 4. (Optional) Package 5. Deploy
43. SO BORING...
44. AUTOMATION
45. PHING http://www.phing.info
46. A BUILD TOOL BASED ON ​ APACHE ANT
47. FRONT-END ISN'T MUCH DIFFERENT...
48. 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
49. FRONT-END TOOLS Probably more soon... Grunt.js Gulp.js Broccoli Brunch
51. A TASK RUNNER FOR JAVASCRIPT
52. AUTOMATION: PHING VS GRUNT Feature Phing Grunt Scope Build Develop + Build Installation Config. format XML JavaScript Config. file build.xml Gruntfile.js Terminology Target, Task, Property Target, Task, Property PEAR npm
53. 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
54. GRUNT WATCH IS FOR
55. GRUNT WATCH IS FOR
56. GRUNT UNCSS CAN DO
57. 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 ' } , } , } ) ;
58. 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 ' ] } } } } ) ;
59. I HAVE ASSETIC!
60. 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)
61. ME...SOMETIMES
62. LESSON: DON'T USE THINGS THAT PRETEND TO BE OTHERS
63. IT'S NOT ONLY AUTOMATION
64. UNLESS YOUR PROJECT LOOKS LIKE < ? p h p e c h o ' H e l l o w o r l d ! ' ; ? >
65. COMPOSER https://getcomposer.org
66. DEPENDENCY MANAGER FOR PHP
67. 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. ...
68. BOWER
69. A PACKAGE MANAGER FOR THE WEB
70. 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. ...
72. SOUNDS FAMILIAR...
74. LIMITATIONS Only main libraries and frameworks Almost no plugins Not the right tool for the job™
75. 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 PHP Node.js Packagist Bower
76. SCAFFOLDING
77. PHP ECOSYSTEM HAS LIMITS
78. 1 FRAMEWORK = 1 SCAFFOLDING SYSTEM Not valid for all the frameworks
79. JAVASCRIPT ECOSYSTEM HAS MOVED A STEP FORWARD
80. YO
81. CLI TOOL FOR SCAFFOLDING
82. SETUP A PROJECT USING GENERATORS
83. GENERATORS ... WebApp Ember Angular.js Backbone Chrome-extension jQuery (plugin) Cordova BUT ALSO...
84. GENERATORS ... Symfony 2 WordPress Magento Phalcon Laravel Slim
86. 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!
88. HEY, WHAT HAPPENED TO THAT YEO...SOMETHING ?
89. YEOMAN
90. A WORKFLOW MADE OF
92. CONCLUSIONS Front-end has became complex ...but tools can help us Scaffold with Yo Manage dependencies with Bower Test and build with Grunt
93. PHP!
94. YEOMAN!
95. THE WEB!
96. THANK YOU!
97. CONTACTS Website: Email: Twitter: www.audero.it a.derosa@audero.it @AurelioDeRosa