front-end tooling
TRANSCRIPT
FRONT-ENDTOOLING
"For Smarter web developers "
#GDG Blida #DEVFEST
HOUSSEM YAHIAOUI
AKA : EL-CODE
Student & GDG Blida member
&
MEAN stack lover & AngularJS indoor speacker
NO AGENDA !So Let's Rock in !
WE ALL DO AGREE THAT <WEB />
Become a frustrating place for newbies !
BUT NOT IF YOU WORKED SMARTER
But why exatcly it's So !
REASONS
1. More time doing Stupid Stuff like : downloading libs andmaking directories ...
2. More Time on updating and managing lib versions
3. More time on tedious stuff like trying to figuring out whystuff dont work together !
IN OUR BIZ TIME = $$
&
TIME IS THE KEY FACTOR TO STAYPRODUCTIVE
That's was our problimatic
Let's fix the problem
1 - Automate your workflow !
"Automation is having tools do the tedious work, so you don'thave to."
That' exactly what i'm trying to say !
Let's Start dig in!
1 - EMBRACE THE POWER OF : $ / #
A - In the MAC / iTerm2
A - In the MAC / Zsh
B - In Windows / Cmder :console with enhancements spiced with Monokai colours and a custom prompt layout
2 - Question :
What is the most used Tool by the Developers / Designersor even End user?
Trivial answer :
Simply your Web Broswers !
Our Browser of choice : Google chrom
Cause Chrom include all the new and great spec +extensions so for web develop/designers is the right tool
DEV Tool !
Angular Batarang !
Page Speed test !
And many more !
That was the tip of the iceberg !
Let's dive in ...
3 - EXTEND YOUR TOOLS !
CAN'T LIVE WITHOUT SUBLIME !
Pligunize IT !
You have to </3 the Package Control
Emmet for The WEB </3body>section*3>h3{Hello GDG}+p{Nice To Be HERE!}
And We'll get the following !
<body> <section> <h3>Hello GDG</h3> <p>Nice To Be HERE!</p> </section> <section> <h3>Hello GDG</h3> <p>Nice To Be HERE!</p> </section> <section> <h3>Hello GDG</h3> <p>Nice To Be HERE!</p> </section></body>
Navigate Using Ctrl + p
Git for commit lovers
MarkDown Editing for conf writers
And more !
1. Code Snippets
2. Themes
3. Additional Language Support such : jade / less / scss /sass ...
4 - BUILD TOOLS !
You use CSS ?
Are you sufring from vendor-prefixes ? and the lack offunctionality ?
Did you heard about CSS Pre-processors !
1. SASS / SCSS 2. LESS 3. Stylus
You use JS ?
Are you sufring ? and you think that it's just overwelming ?
Did you heard about Language Transpilers !
1. Coffee Script 2. TypeScript
We talked about Speed !
Statistique : 98% of the over all rendring is due to the JS /CSS / HTML rendring ..
We need a serious Solution !
Two Words !
Files Minification
But the process can be just overwelming !
Did you heard about the Task Runners ?
What's That !
it's a tool that :
1. Improve Your Code quality.
2. Make your User Happy.
3. It’s easily repeatable. - we will discuss this point later on -
Examples !
Let's Check Grunt out !
Grunt is a task runner !, he use a set of configuration
principales in order to do his WORK ! those conf are savedin a key file called Gruntfile.js
Gruntfile.js
Grunt use the module pattern to the max !and we can download them using Node Package Manager
aka : npm
Then we load those plugins using grunt api !
Let's minify using Grunt-Concat + Grunt-uglify
Download it through the following commande :
than we configure the tasks and load them in theGruntfile.js
No Time for Downloading / Updating / Configuringpackages !
Use a package manager !
Personal Choice : Bower !
Bower how To !
We have in fact two ways to do the job !
1. From the Bower.json (manifest file) :
+
2. From the Cli :
The Result :
Yeoman !
But we will see that in practise in our Code Lab
Keep in touch with me !
G+ : +HoussemYahiaoui
Twittre : @free_g33k
Facebook : fcb.com/houssem.intern0t#peace