modern web application devlopment workflow
TRANSCRIPT
Modern Web Application Development Workflow
@Hmidi Hamdi
1
Hmidi HamdiWeb & Mobile DeveloperSoftware Engineering @ ISSATSoFounder & Member @ IGC JSA @ JCertif Tunisia
2
First, Let’s Look at the Past
How Web applications used to be done ?
3
Throw a branch of HTML filesAdd a couple of CSS files
Put Some Javascipt Scripts
And That’s All
4
Come Back 6 Monthes Later
And try to remeber how to mantain your code
5
6
Moving Forward
7
Chrome V8 Engine
OpenSource Engine for Google ChromeWritten in C/C++
Fastest Javascript Engine
8
Welcome to Node.Js World
Use the power of V8 Engine
9
Node Js is javascript RuntimeCreated by javascript developers
for javascript developers
Event DrivenNon Blocking(Asynchronous)
Use Npm to manage packages
10
So !!
Is it Really what we need
11
Full Web Stack
MEAN Stack(MongoDB-ExpressJs-AngularJS-NodeJS)
12
13
A Good Devlopement workflow
Helps you to get started Mantains you dependencies
Enforce Best practicesPrepares your tools
Ease the realise process14
HOW TO GET STARTED
15
16
YEOMAN Scaffolding
StructureCompilation
Dependencies managmentUnit testing
Various generators (AngularJs, EmberJS, ReactJs, Backbone...) 17
Enjoy The View, YEOMAN take care of everything
18
Preprocesseurs Package Managers
Task Runners
19
20
21
22
23
Git & Github
24
25
26
27
28
Unit & End2End Testing
29
Unit Testing NodeJs
30
Exampledescribe('Student', function () { var student = { classes: [ 'English', 'Maths', 'Science' ] }
it('should have correct number of classes', function () { student.should.have.property('classes').with.lengthOf(3) })})
31
Unit Testing AngularJs
32
E2E Testing
33
CLI
34
Yo : 1- Install Yo, bower and gulp
$npm install -g yo bower grunt-cli gulp
2- Install Basic scafollding
$npm install -g generator-webapp
$mkdir myapp && cd myapp && yo webapp
3- Angular Scaffolding
$npm install -g generator-angular
$mkdir myapp && cd myapp && yo angular 35
Bower :
bower install <dep> // install dependecy <dep>
bower search <dep> //search for <dep>
bower list //list installed dependecies
bower update //update dependecies
36
Gulp :
$gulp serve // to serve the app
$gulp test // to run tests
$gulp build // to build dist version
37
Demo
38
Thank You
Q/A
39