The Mean Stack

DID YOU KNOW HOW JAVASCRIPT IS

AWESOME

THIS IS A PUNCHLINE ! !

THANKS FOR COMING AND GOODBYE !

JUST JOKING !

HELLO AND WELCOME

BUT BEFORE STARTING... WHO AM I ?

CLÉMENT SAUVAGE 25 YEARS OLD MOBILE & WEB SOFTWARE ENGINEER
FROM #LILLE @CLEMENTSAUVAGE ON TWITTER & @CLMNTSVG ON INSTAGRAM

NOWADAYS WORKING FOR & ALSO TEACHER, SPEAKER, TRAINER, AUTHOR

ONE QUESTION REMAINS ! What about you ? NAME, JOB,
INTEREST IN JS, EXPERIENCE WITH IT, AND... WHAT DO YOU EXPECT FROM THIS WEEK !

THANKS !

ABOUT THIS WEEK

9H00/17H00 MONDAY -> FRIDAY 1.5H BREAK AT 12.00/12.30 25 MIN.
BREAK AT 10.30 & 3.30

SLIDES AVAILABLE ON SATURDAY ON SPEAKERDECK SPEACKERDECK.COM/CSAUVAGE

ALL (COMMENTED) CODE SAMPLES AND FULLFILED EXCERCICES AVAILABLE ON MY
GITHUB GITHUB.COM/CSAUVAGE

TRAINING CONTENT !

HTML 5 | CSS 3 & Preprocessors | Bootstrap REST
& Webservices Design Pattern AND

JAVASCRIPT

SOOO MUCH

YOU'LL THINK, EAT, DREAM AND EVEN PEE JAVASCRIPT

GLOBALLY

MONDAY Web 2.0 HTML 5, CSS 3, JAVACRIPT "A LA
PAPA" DOM, CLASSES, ID, SELECTORS INSTALLING THE TOOLS

TUESDAY NODE.JS

WEDNESDAY REST EXPRESS.JS

THURSDAY NOSQL W/ MONGO ANGULAR 2

FRIDAY ANGULAR - THE 2 TOWERS Let it go... You're
free (at 5.00pm !)

LETS TALK JS !

> Created in less than 10 days by Brendan Eich
for Netscape Communication > Java-script (one and only time I'll talk about JAVA !) > December 1995 > Microsoft react (") and launch JScript > ... > Actaully ES7 (ECMA Script 2016)

But no use of ES7 here (not supported by lastest
Node version).

And we'll use only few concepts of ES6 (ES 2015)

WHAT ABOUT MEAN STACK NOW !

WHAT ABOUT NODE ?

GRAPH TIME

BUT BEFORE NODE.JS LET'S BEGIN... WITH THE BEGINNING !

HTML 5

CLIENT SIDE JS

PREPROCESSORS

FRAMEWORKS FRONT END BOOTSTRAP ZURB FOUNDATION

TUESDAY

QUICK REMINDER Yesterday we've talked about > HTML (the content
of the page) <html> (...) <body> <div class="my__body__class"> </body> </html>

> CSS 3 (The style of the page) .my__body__class {
background-color: yellow; color: blue; /*OK these combination is aweful !*/ }

> 2 of its preprocessor LESS (written by Alexis Sellier,
written ein JS) @myKolor : #E6E6E6 .borderRadius(@radius) { border-radius: @radius; /* Note that it won't prefix your CSS output on your behalf */ } .my__body__class { background-color: @myKolor .borderRadius(5px); }

SASS, a bit more powerful with Bourbon and or Compass
(ORIGINALLY WRITTEN I RUBY, BUT ALMOST AVAILABLE EVERYWHERE ) @import "colors"; $primaryColor: #1DC035; $secondayColor: #FF9250; $violet: #8C3CAA; @mixin borderRadiusMixin($borderRadius) { border-radius: $borderRadius; } .article { $secondayColor: #E9222F; background-color: $secondayColor; }

.message { background-color: $secondayColor; border: solid 1px darken(#E4E4E4, 20%); color:
$bleu; @include borderRadiusMixin(20px); } .classe_a { $violet: #0D6E4F; color: $violet; } .classe_b { color: $violet; } $columns: 12; @for $i from 1 through $columns { .colonne-#{$i} { width: ((100/$columns)*$i)*0.8%; margin: 5px; background-color: $violet; display: inline-block; } }

We then discovered 2 responsive front-end framework (we'll see them
deeper later on): > Bootstrap : Originally designed by 2 twitter buddies (powerful, but tedious with class names); > ZURB Foundation : The one I love (Did I mention it !), clean, powerful and lightweight.

WE'LL TALK ... JAVASCRIPT ! > Old School JS >
Our very first Node apps

BY THE END OF THE DAY Write few node applications
BUT WE NEED TO KNOW FEW THINGS ABOUT DATA INTERCHANGE

HERE COMES OUR NEWLY ARRIVED FRIEND JSON

J.S.O.N STANDS FOR JAVASCRIPT OBJECT NOTATION

JAVASCRIPT ? OBJECT ? BUT YESTERDAY YOU'VE TOLD US THAT...
I know !"#

// 1 Primitive Data Type //Boolean store true or false
var iAmDevelopper = true; var iAmButcher = false; //Numbers var playerScore = 12; var playerLives = 5; //String var firstname = "Clément"; var lastanme = "SAUVAGE"; var business = "Startup Founder"; var jobs = "C.T.O";

// 1 Primitive Data Type (2) //NULL var whatsThisVar =
null; //Undefined var specificallyUndefined = undefined; var initVar;

// Identifying types and values var myVariable = "Hello, World";
//Undefined console.log(myVariable); // Hello, World console.log(typeof myVariable); // String

== != === // Comparing Objects And Values var myString
= "5"; var myNumber = 5; //Undefined console.log(myString == myNumber); // true console.log(myString === myNumber); // false

PRIMITIVES USEFUL METHODS // Comparing Objects And Values var myString
= "Hello"; var ucString = myString.toUpperCase(); // returns "HELLO" var lcString = ucString.toLowerCase(); // returns "hello" //And much...much more on MDN (Mozilla developper network)

CREATING OBJECT var myPupil = new Object(); myPupil.firstname = "Jean";
myPupil.lastname = "Dutilleul"; myPupil.age = 27; myPupil.job = { title: "Boulanger", farines : ['Bise', 'Type 540', 'Levain', '...'] /* Other properties */ }; //<= Litteral Object

PROTOTYPES FUNCTION function Job(jobTitle, arrayOfLanguages){ this.title = jobTitle; this.language =
arrayOfLanguages; } function Person(){ this.firstname; this.lastname; this.age; this.job; this.pointDeVie = 100; this.eat = function(manger, pointDeVie) { this.pointDeVie += pointDeVie; console.log(`J'ai bien mangé ${manger}, j'ai gagné ${pointDeVie} PdV, j'ai donc ${this.pointDeVie} PdV`); } this.work = function(travail) { this.pointDeVie -= 30; console.log(`J'ai bien travaillé ${travail}, mais j'ai maintenant ${this.pointDeVie} PdV !`); } }

var luke = new Person(); luke.firstname = "Luke"; luke.lastname =
"Skywalker"; luke.age = 6; luke.job = new Job("Padawan", new Array("Light Saber", "The dark side of the Force")); console.log(luke.job.title); console.log(luke.work('The Force')); console.log(luke.work('Levitation')); console.log(luke.eat('ewok', 10)); console.log(luke.eat('red pepper', 60));

LET'S PLAY WITH NODE.JS

QUICK REMINDER > NOT a framework > Javascript runtime environnement
based on V8 engine. > V8 Engine written in C++ for Google Chrome & derived product > Lauched in 2009 by Ryan Dahl > Main goal : Use JS server side

INSTALL NODE.JS

RUN NODE IN THE CONSOLE Just type node in your
shell. It will lauch a REPL (for Read Eval Print Loop) which will allow you to "playground" Node.js.

The Mean Stack

The Mean Stack

More Decks by Clément Sauvage

Other Decks in Programming

Featured

Transcript