MODERN FRONT-END WITH THE EYES OF A PHP DEVELOPER Aurelio De Rosa Amsterdam, Netherlands - 28 June 2014 

ABOUT ME (THE MOST BORING PART OF THE TALK!) 

WEB & APP DEVELOPER Previously employed at the University of Salerno, I'm now self-employed. 

PROJECTS I'VE CONTRIBUTED TO ... jQuery CanIUse PureCSS 

WRITE ARTICLES FOR 

AUTHORED BOOKS JQUERY IN ACTION (3RD EDITION) INSTANT JQUERY SELECTORS (Shameless self-promotion!) 

QUESTIONS TIME! 

HOW MANY FULL-STACK DEVELOPERS? 

HOW MANY KNOW JAVASCRIPT? 

LET'S START! 

WE 

BUT... 

PEOPLE EXPECT HIGHLY INTERACTIVE WEBSITES 

WEB ≅ PHP + HTML + CSS + JS 

No content

LUCKY ? 

GOAL Compare PHP tools with front-end tools to understand the latter faster 

LET THE UPGRADE BEGIN! 

A TYPICAL PROJECT f o r ( i = 0 ; i < n ; i + + ) { / / C o d e h e r e } 

A TYPICAL PROJECT SCAFFOLD DEVELOP TEST BUILD 

DEPENDENCIES MANAGEMENT 

UNLESS YOUR PROJECT LOOKS LIKE < ? p h p e c h o ' H e l l o w o r l d ! ' ; ? > 

COMPOSER https://getcomposer.org 

DEPENDENCY MANAGER FOR PHP 

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

BOWER 

A PACKAGE MANAGER FOR THE WEB 

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

No content

SOUNDS FAMILIAR... 

No content

LIMITATIONS Only main libraries and frameworks Almost no plugins Not the right tool for the job™ 

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 

DEVELOPMENT 

WEB UI 

HAVE YOU HEARD OF / ( S A | L E ) S S / ? 

WTF IS THIS? 

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 ; } 

WEB UI 

WHAT ABOUT THE (FRONT-END) BUSINESS LOGIC? 

BUSINESS LOGIC 

DID YOU SAY TEST ? 

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

CODE STYLE PSR-1 AND PSR-2 

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 . 

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 . 

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 

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 ; } } 

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

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 . . . } ) ( ) ; } } 

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 

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 ' ) ; } ) 

EXAMPLE QUNIT (RESULTS) 

BUILD 

BUILD (BACKEND) 1. Configure 2. Move / Copy / Rename files 3. Test 4. (Optional) Package 5. Deploy 

SO BORING... 

AUTOMATION 

PHING http://www.phing.info 

A BUILD TOOL BASED ON ​ APACHE ANT 

FRONT-END ISN'T MUCH DIFFERENT... 

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 

FRONT-END TOOLS Grunt.js Gulp.js Broccoli Brunch And much, much more... 

No content

A TASK RUNNER FOR JAVASCRIPT 

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 

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 

GRUNT WATCH IS FOR 

GRUNT WATCH IS FOR 

GRUNT UNCSS CAN DO 

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 ' } } } ) ; 

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 ' ] } } } } ) ; 

I HAVE ASSETIC! 

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) 

ME...SOMETIMES 

LESSON: DON'T USE THINGS THAT PRETEND TO BE OTHERS 

IT'S NOT ALL ABOUT BUILDING TOOLS 

SCAFFOLDING 

PHP ECOSYSTEM HAS LIMITS 

1 FRAMEWORK = 1 SCAFFOLDING SYSTEM Not valid for all the frameworks 

JAVASCRIPT ECOSYSTEM HAS MOVED A STEP FORWARD 

YO 

CLI TOOL FOR SCAFFOLDING 

SETUP A PROJECT USING GENERATORS 

GENERATORS ... WebApp Ember Angular.js Backbone Chrome-extension jQuery (plugin) Cordova BUT ALSO... 

GENERATORS ... Symfony 2 WordPress Magento Phalcon Laravel Slim 

No content

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! 

No content

HEY, WHAT HAPPENED TO THAT YEO...SOMETHING ? 

YEOMAN 

A WORKFLOW MADE OF 

No content

CONCLUSIONS Front-end has become complex ...but tools can help us Scaffold with Yo Manage dependencies with Bower Test and build with Grunt 

PHP! 

YEOMAN! 

THE WEB! 

THANK YOU! 

QUESTIONS? 

CONTACTS Website: Email: Twitter: www.audero.it [email protected] @AurelioDeRosa