Upload
david-dias
View
148
Download
2
Embed Size (px)
Citation preview
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)
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