Pro Yearly is on sale from $80 to $50! »

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. 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

  15. None
  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. ...
  29. None
  30. SOUNDS FAMILIAR...

  31. None
  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...

  63. None
  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

  86. None
  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!
  88. None
  89. HEY, WHAT HAPPENED TO THAT YEO...SOMETHING ?

  90. YEOMAN

  91. A WORKFLOW MADE OF

  92. None
  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