Modern front-end with the eyes of a PHP developer - 4Developers 2014

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.

8b01a8b4d7a0a9079a4e97b1ddedbe56?s=128

Aurelio De Rosa

April 07, 2014
Tweet

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

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

  50. None
  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. ...
  71. None
  72. SOUNDS FAMILIAR...

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

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

  89. YEOMAN

  90. A WORKFLOW MADE OF

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