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

Front-End Developer architect / manager

http://www.proximity.bbdo.mu/

David Dias@daviddiasfront www.david-dias.com

A long time ago, in a galaxy far, far away, Back-Ends were coding HTML, CSS and JavaScript...

- Two different ways to work - No common guidelines - Misunderstandings - "Front-End" is easiest than Back-End ...

This ways is not perfectly working...

You need to learn the steps to invite a Front-End developer to dance...

You don't want to dance...

But do you really know how looks like a

Front-End developer?

The dream...

and the reality...

... sorry... THE possible reality.

#WOCinTech Chat

Let's see our 5 steps.

Step 1 Learn to know the Front-End developer

and his tools

#WOCinTech Chat

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

It was the case...

... before...

Now, Front-End needs to care about...

Accessibility

PerformanceSEO

QualityMaintainability

Browser compatibility

Animations

User Experience

Architecture

Scalability

Jeff Pelletier / On Medium

Step 2 Give him the choice to select his music

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

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

SASS vs LESS

Src: 2015 Survey from ashleynolan.co.uk Disclaimer: these are just responses from a small portion of developers.

http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/

GRUNT vs GULP (or NPM)

• code minification

• code-quality analysis

• image optimization

• vendor-prefixing

• unit-testing

And much more...

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

GRUNT vs GULP (or NPM)

Source: tech.tmw.co.uk

GRUNT vs GULP (or NPM)

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

ANGULAR vs REACT (or Aurelia)

Photo credit: @jwcarrol

ANGULAR vs REACT (or Aurelia)

https://medium.freecodecamp.com/angular-2-versus-react-there-will-be-blood-66595faafd51#.85lqu6t08

PUG (Jade) vs the OTHERS

EXPRESS.JS vs METEOR.JS

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

Step 3 Give him / her your phone number

(in JSON format, please)

https://phpmu-firechat-demo.firebaseio.com/

Step 4 Wait, and leave him / her to call you

"back"

It'll probably talk to you about...

GULP PHP DEMO

Step 5 Ask the Front-End to dance with you

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

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

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

Thank you. Merci.

Obrigado.

Feedbacks on Twitter with #phpmauritiusug