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

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.

8b01a8b4d7a0a9079a4e97b1ddedbe56?s=128

Aurelio De Rosa

June 28, 2014
Tweet

Transcript

  1. 1.

    MODERN FRONT-END WITH THE EYES OF A PHP DEVELOPER Aurelio

    De Rosa Amsterdam, Netherlands - 28 June 2014
  2. 11.

    WE

  3. 12.
  4. 15.
  5. 16.
  6. 19.

    A TYPICAL PROJECT f o r ( i = 0

    ; i < n ; i + + ) { / / C o d e h e r e }
  7. 22.

    UNLESS YOUR PROJECT LOOKS LIKE < ? p h p

    e c h o ' H e l l o w o r l d ! ' ; ? >
  8. 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. ...
  9. 26.
  10. 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. ...
  11. 29.
  12. 31.
  13. 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
  14. 35.
  15. 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 ; }
  16. 39.
  17. 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 ) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  18. 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 .
  19. 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 .
  20. 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
  21. 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 ; } }
  22. 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 . }
  23. 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 . . . } ) ( ) ; } }
  24. 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
  25. 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 ' ) ; } )
  26. 54.
  27. 55.

    BUILD (BACKEND) 1. Configure 2. Move / Copy / Rename

    files 3. Test 4. (Optional) Package 5. Deploy
  28. 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
  29. 63.
  30. 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
  31. 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
  32. 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 ' } } } ) ;
  33. 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 ' ] } } } } ) ;
  34. 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)
  35. 81.

    YO

  36. 86.
  37. 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!
  38. 88.
  39. 90.
  40. 92.
  41. 93.

    CONCLUSIONS Front-end has become complex ...but tools can help us

    Scaffold with Yo Manage dependencies with Bower Test and build with Grunt
  42. 94.
  43. 95.
  44. 96.