Modern web application devlopment workflow

1. Modern Web Application
Development Workflow
@Hmidi Hamdi
1

2. Hmidi Hamdi
Web & Mobile Developer
Software Engineering @ ISSATSo
Founder & Member @ IGC
JSA @ JCertif Tunisia
2

3. First, Let’s Look at the
Past
How Web applications used to be done ?
3

4. Throw a branch of HTML files
Add a couple of CSS files
Put Some Javascipt Scripts
And That’s All
4

5. Come Back 6 Monthes Later
And try to remeber how to mantain your
code
5

6. 6

7. Moving Forward
7

8. Chrome V8 Engine
OpenSource Engine for Google Chrome
Written in C/C++
Fastest Javascript Engine
8

9. Welcome to Node.Js
World
Use the power of V8 Engine
9

10. Node Js is javascript Runtime
Created by javascript developers
for javascript developers
Event Driven
Non Blocking(Asynchronous)
Use Npm to manage packages
10

11. So !!
Is it Really what we
need 11

12. Full Web Stack
MEAN Stack(MongoDB-ExpressJs-AngularJS-NodeJS)
12

13. 13

14. A Good Devlopement
workflow
Helps you to get started
Mantains you dependencies
Enforce Best practices
Prepares your tools
Ease the realise process
14

15. HOW TO GET STARTED
15

16. 16

17. YEOMAN Scaffolding
Structure
Compilation
Dependencies managment
Unit testing
Various generators (AngularJs, EmberJS, ReactJs,
Backbone...) 17

18. Enjoy The View, YEOMAN take
care of everything
18

19. Preprocesseurs
Package
Managers
Task Runners
19

20. 20

21. 21

22. 22

23. 23

24. Git & Github
24

25. 25

26. 26

27. 27

28. 28

29. Unit & End2End
Testing
29

30. Unit Testing NodeJs
30

31. Example
describe('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

32. Unit Testing AngularJs
32

33. E2E Testing
33

34. CLI
34

35. 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

36. Bower :
bower install <dep> // install dependecy <dep>
bower search <dep> //search for <dep>
bower list //list installed dependecies
bower update //update dependecies
36

37. Gulp :
$gulp serve // to serve the app
$gulp test // to run tests
$gulp build // to build dist version
37

38. Demo
38

39. Thank You
Q/A
39