Modern web application devlopment workflow

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