How to invite a Front-End developer to dance?

A presentation made during the 2nd PHP Mauritius meetup (http://www.meetup.com/fr-FR/PHP-Mauritius-UG/), at Voila Hotel.

I tried to give some overview about the Front-End world and how Back-End and Front-End can understand each other and work more "hand by hand". We are moving to Full Stack developers that use daily JavaScript for Front and Back-End, it's then important for a Front-End to understand better Back, and for a Back-End to understand better the Front-End today.

Step 1: Learn to know the Front-End developer
and his tools
Step 2: Give him the choice to select his music
Step 3: Give him / her your phone number
(in JSON format, please)
Step 4: Wait, and leave him / her to call you "back"
Step 5: Ask the Front-End to dance with you

Transcript

1. How to invite a Front-End developer to dance? Facilitate interactions between Front-End and Back-End developers David Dias Front-End Manager / Developer 21 July 2016 - Mauritius
2. Front-End Developer architect / manager http://www.proximity.bbdo.mu/ David Dias @daviddiasfront www.david-dias.com
3. A long time ago, in a galaxy far, far away, Back-Ends were coding HTML, CSS and JavaScript...
5. - Two different ways to work - No common guidelines - Misunderstandings - "Front-End" is easiest than Back-End ...
6. This ways is not perfectly working... You need to learn the steps to invite a Front-End developer to dance...
8. You don't want to dance... But do you really know how looks like a Front-End developer?
9. The dream...
10. and the reality...
11. ... sorry... THE possible reality. #WOCinTech Chat
12. Let's see our 5 steps.
13. Step 1 Learn to know the Front-End developer and his tools #WOCinTech Chat
14. -Wikipedia « The practice of producing HTML, CSS and JavaScript for a website or web application so that a user can see and interact with them directly. »
15. It was the case...
17. ... before...
19. Now, Front-End needs to care about...
20. Accessibility Performance SEO Quality Maintainability Browser compatibility Animations User Experience Architecture Scalability
21. Jeff Pelletier / On Medium
22. Step 2 Give him the choice to select his music
23. SASS vs LESS • Cleaner code with reusable pieces and variables • Saves you time • Easier to maintain code with snippets and libraries • Calculations and logic • More organized and easy to setup
24. SASS vs LESS @mixin border-radius ($values) { border-radius: $values; } nav { margin: 50px auto 0; width: 788px; height: 45px; @include border-radius(10px); } .border(@radius) { border-radius: @radius; } nav { margin: 50px auto 0; width: 788px; height: 45px; .border(10px); }
25. SASS vs LESS Src: 2015 Survey from ashleynolan.co.uk Disclaimer: these are just responses from a small portion of developers.
26. http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/
27. GRUNT vs GULP (or NPM) • code minification • code-quality analysis • image optimization • vendor-prefixing • unit-testing And much more...
28. GRUNT vs GULP (or NPM) grunt.initConfig({ sass: { dist: { files: [{ src: 'dev/*.scss', dest: '.tmp/styles', expand: true, ext: '.css' }] } }, autoprefixer: { dist: { files: [{ expand: true, cwd: '.tmp/styles', src: '{,*/}*.css', dest: 'css/styles' }] } }, watch: { styles: { files: ['dev/*.scss'], tasks: ['sass:dist', 'autoprefixer:dist'] } } }); grunt.registerTask('default', ['styles', 'watch']); gulp.task('sass', function () { gulp.src('dev/*.scss') .pipe(sass()) .pipe(autoprefixer()) .pipe(gulp.dest('css/styles')); }); gulp.task('default', function() { gulp.run('sass'); gulp.watch('dev/*.scss', function() { gulp.run('sass'); }); });
29. GRUNT vs GULP (or NPM) Source: tech.tmw.co.uk
30. GRUNT vs GULP (or NPM)
31. or NPM... { "name": "npm-scripts-example", "version": "1.0.0", "description": "npm scripts example", "scripts": { "clean": "rimraf ./dist && mkdir dist", "prebuild": "npm run clean", "build": "cross-env NODE_ENV=production webpack" } }
32. ANGULAR vs REACT (or Aurelia) Photo credit: @jwcarrol
33. ANGULAR vs REACT (or Aurelia) https://medium.freecodecamp.com/angular-2-versus-react-there-will-be-blood-66595faafd51#.85lqu6t08
35. PUG (Jade) vs the OTHERS
36. EXPRESS.JS vs METEOR.JS
37. EXPRESS.JS vs METEOR.JS Meteor gives you for free: - hot code reload - mobile development (web, Android and iOS apps from the same code base), - reactive templates that update automatically when data on the server changes - session management - packages that can install components both on the server and on the client Src: https://wiki.dandascalescu.com/essays/meteor_js_vs_the_mean_stack
38. Step 3 Give him / her your phone number (in JSON format, please)
40. https://phpmu-firechat-demo.firebaseio.com/
42. Step 4 Wait, and leave him / her to call you "back"
43. It'll probably talk to you about...
44. GULP PHP DEMO
45. Step 5 Ask the Front-End to dance with you
47. • Understand the complexity of the Front-End development today. • Build architecture together and define a common workflow and guidelines. • Don't be afraid to install Node.js and launch a "gulp build". • Remind the Front-End that he can do everything you are doing, only with JavaScript. • Don't complain the Front-End work or push the responsability to him, you need to be hand by hand... to dance.
48. Now you know quite a lot to invite a Front-End developer to dance... I'm sure it could be like you imagine... Like that...
50. CONCLUSION
 If you do all of that and still don't know how to invite a Front-End dev to dance... You still can try this...
52. Thank you. Merci. Obrigado. Feedbacks on Twitter with #phpmauritiusug