MODERN WEB APPLICATION DEVELOPMENT WORKFLOW FIRST, LETS LOOK AT - - PowerPoint PPT Presentation

▶
modern
SMART_READER_LITE
LIVE PREVIEW

MODERN WEB APPLICATION DEVELOPMENT WORKFLOW FIRST, LETS LOOK AT - - PowerPoint PPT Presentation

Dec 28, 2022 485 likes •1.98k views

MODERN WEB APPLICATION DEVELOPMENT WORKFLOW FIRST, LETS LOOK AT THE PAST THROW A BUNCH OF HTML FILES THROW A BUNCH OF HTML FILES ADD A COUPLE OF CSS FILES THROW A BUNCH OF HTML FILES ADD A COUPLE OF CSS FILES PUT SOME JAVASCRIPT IN ALL THIS

slide-1
SLIDE 1

MODERN

WEB APPLICATION DEVELOPMENT WORKFLOW

slide-2
SLIDE 2

FIRST, LET’S LOOK AT THE PAST

slide-3
SLIDE 3
slide-4
SLIDE 4

THROW A BUNCH OF HTML FILES

slide-5
SLIDE 5

THROW A BUNCH OF HTML FILES ADD A COUPLE OF CSS FILES

slide-6
SLIDE 6

THROW A BUNCH OF HTML FILES ADD A COUPLE OF CSS FILES PUT SOME JAVASCRIPT IN ALL THIS

slide-7
SLIDE 7

THROW A BUNCH OF HTML FILES ADD A COUPLE OF CSS FILES PUT SOME JAVASCRIPT IN ALL THIS AND CALL IT A DAY...

slide-8
SLIDE 8

COME BACK 6 MONTHS LATER AND TRY TO REMEMBER HOW TO MAINTAIN YOUR CODE

slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11
slide-12
SLIDE 12

Node.js

≠

Server-side JavaScript

slide-13
SLIDE 13

Node.js

stand alone JavaScript runtime

slide-14
SLIDE 14

Node.js

stand alone JavaScript runtime using v8, Chrome’s JavaScript engine

slide-15
SLIDE 15

Node.js

stand alone JavaScript applications

slide-16
SLIDE 16

Node.js

stand alone JavaScript applications created by JavaScript developers

slide-17
SLIDE 17

Node.js

stand alone JavaScript applications created by JavaScript developers for JavaScript developers

slide-18
SLIDE 18

BRAND NEW WORLD

slide-19
SLIDE 19

JAVASCRIPT DEVELOPMENT TOOLS

slide-20
SLIDE 20

JAVASCRIPT DEVELOPMENT WORKFLOW

slide-21
SLIDE 21

A GOOD DEVELOPMENT WORKFLOW

  • HELPS YOU GET STARTED
slide-22
SLIDE 22

A GOOD DEVELOPMENT WORKFLOW

  • HELPS YOU GET STARTED
  • MAINTAINS YOUR DEPENDENCIES
slide-23
SLIDE 23

A GOOD DEVELOPMENT WORKFLOW

  • HELPS YOU GET STARTED
  • MAINTAINS YOUR DEPENDENCIES
  • ENFORCES BEST PRACTICES
slide-24
SLIDE 24

A GOOD DEVELOPMENT WORKFLOW

  • HELPS YOU GET STARTED
  • MAINTAINS YOUR DEPENDENCIES
  • ENFORCES BEST PRACTICES
  • PREPARES YOUR TOOLS
slide-25
SLIDE 25

A GOOD DEVELOPMENT WORKFLOW

  • HELPS YOU GET STARTED
  • MAINTAINS YOUR DEPENDENCIES
  • ENFORCES BEST PRACTICES
  • PREPARES YOUR TOOLS
  • FIGHTS REGRESSIONS
slide-26
SLIDE 26

A GOOD DEVELOPMENT WORKFLOW

  • HELPS YOU GET STARTED
  • MAINTAINS YOUR DEPENDENCIES
  • ENFORCES BEST PRACTICES
  • PREPARES YOUR TOOLS
  • FIGHTS REGRESSIONS
  • EASES THE RELEASE PROCESS
slide-27
SLIDE 27

HOW TO GET STARTED?

slide-28
SLIDE 28
slide-29
SLIDE 29

YEOMAN

Born in 2012 Various contributors (Employees from Google, Twitter, etc)

slide-30
SLIDE 30

YEOMAN scaffolding

  • structure
  • compilation
  • static analysis
  • dependencies management
  • development tools
  • unit testing
slide-31
SLIDE 31

YEOMAN download

> npm install -g yo “-g” global install

slide-32
SLIDE 32

YEOMAN

Various generators: ○ Angular ○ Ember ○ Backbone And all the other popular frameworks...

slide-33
SLIDE 33

YEOMAN angular.js generator

> npm install -g generator-angular

slide-34
SLIDE 34

YEOMAN create an Angular project

> yo angular

slide-35
SLIDE 35

Select some dependencies

slide-36
SLIDE 36

Choose some options

slide-37
SLIDE 37

It creates the project

slide-38
SLIDE 38

It downloads half of the internet

slide-39
SLIDE 39

It uses some dark magic

slide-40
SLIDE 40

Enjoy the view, Yeoman takes care of everything…

slide-41
SLIDE 41

What does the result look like?

slide-42
SLIDE 42

STRUCTURE

slide-43
SLIDE 43

CONTENT

slide-44
SLIDE 44

DEPENDENCIES

slide-45
SLIDE 45

DEV TOOLS

slide-46
SLIDE 46

IT’S MAGIC!

and it will be your job to maintain it...

slide-47
SLIDE 47

HAPPY?

slide-48
SLIDE 48

BUT HOW DOES IT WORK?

slide-49
SLIDE 49

YEOMAN HAS FRIENDS

slide-50
SLIDE 50

BOWER

slide-51
SLIDE 51
slide-52
SLIDE 52

GRUNT

slide-53
SLIDE 53
slide-54
SLIDE 54

GULP

slide-55
SLIDE 55
slide-56
SLIDE 56

AND OTHERS

slide-57
SLIDE 57

DEPENDENCIES MANAGEMENT

slide-58
SLIDE 58

BOWER

slide-59
SLIDE 59
slide-60
SLIDE 60

BOWER

Package manager for the web Born in 2012 Created by Twitter and other contributors

  • ver time
slide-61
SLIDE 61

BOWER Download

> npm install -g bower

slide-62
SLIDE 62

Find a package: bower search

slide-63
SLIDE 63

Find more information: bower info

slide-64
SLIDE 64

BOWER Add a specific dependency

> bower install jquery#1.10.2 --save install jquery and save this new dependency

slide-65
SLIDE 65

BOWER

runtime dependencies in bower.json

slide-66
SLIDE 66

DEPENDENCIES

slide-67
SLIDE 67

BOWER Add all your dependencies

> bower install

slide-68
SLIDE 68

See your dependencies: bower list

slide-69
SLIDE 69

BOWER

Package management always comes with its set of problems:

slide-70
SLIDE 70

BOWER

Package management always comes with its set of problems:

  • how can I create a new package?
slide-71
SLIDE 71

BOWER

Package management always comes with its set of problems:

  • how can I create a new package?
  • how can I host a bower repository?
slide-72
SLIDE 72

Create a bower package: bower init

slide-73
SLIDE 73

BOWER Use bower with Git

> bower install https://myrepository.git

slide-74
SLIDE 74

BOWER Host multiple versions

> git tag -a 1.4 -m 'version 1.4' > bower install https://myrepository.git#1.4

slide-75
SLIDE 75

BOWER Download

> bower install jquery > bower install git://github.com/jquery/jquery.git

slide-76
SLIDE 76

BOWER Registry

https://github.com/bower/registry A simple web server listing Git repository URLs

slide-77
SLIDE 77

BOWER Register

> bower register myrepository https://…git > bower install myrepository

slide-78
SLIDE 78

BUILD

slide-79
SLIDE 79
slide-80
SLIDE 80

GRUNT GULP

slide-81
SLIDE 81

CONFIGURATION GULP CODE GRUNT

slide-82
SLIDE 82

EQUALLY POWERFUL

slide-83
SLIDE 83

GRUNT is a bit older so its ECOSYSTEM is more mature

slide-84
SLIDE 84

Grunt and Gulp

development tools dependencies in package.json >npm install

slide-85
SLIDE 85

DEV TOOLS

slide-86
SLIDE 86

GRUNT

slide-87
SLIDE 87
slide-88
SLIDE 88

GRUNT configuration over code

grunt.initConfig({ lint: { src: 'src/<%= pkg.name %>.js' }, concat: { src: [ '<banner:meta.banner>' , '<file_strip_banner:src/<%= pkg.name %>.js>' ], dest: '<%= pkg.name %>.js' } });

slide-89
SLIDE 89

GRUNT

Configuration in Gruntfile.js

slide-90
SLIDE 90

GRUNT

Global install before Grunt 0.4 Updating Grunt cannot break existing projects anymore

slide-91
SLIDE 91

GRUNT gruntfile.js structure

3 parts:

  • Task loading
  • Task configuration
  • Task registration
slide-92
SLIDE 92

GRUNT

An example: Static code analysis with JSHINT

slide-93
SLIDE 93

GRUNT

slide-94
SLIDE 94

HOW DO YOU USE IT?

>grunt >grunt jshint:all

slide-95
SLIDE 95

GULP

slide-96
SLIDE 96
slide-97
SLIDE 97

GULP code over configuration

gulp.src('src/main.mycss' ) .pipe(stylus()) .pipe(rename({ ext: 'css' })) .pipe(autoprefixer()) .pipe(cssmin()) .pipe(header( '/* All Right Reserved */' )) .pipe(gulp.dest( 'dist'))

slide-98
SLIDE 98

GULP

Configuration in Gulpfile.js

slide-99
SLIDE 99

GULP gulpfile.js structure

3 parts:

  • task loading
  • task configuration
  • task registration
slide-100
SLIDE 100

GULP

slide-101
SLIDE 101

GULP differences with Grunt

node.js streams (asynchronous by nature) nice and simple api less IO operations

slide-102
SLIDE 102

BUILD TASKS

slide-103
SLIDE 103

STATIC ANALYSIS

grunt-contrib-jshint gulp-jshint Detect coding errors in your JavaScript files

slide-104
SLIDE 104

STATIC ANALYSIS

Various style of reports (checkstyle, html, etc) Configuration in .jshtinrc

slide-105
SLIDE 105

MINIFICATION

grunt-contrib-uglify gulp-uglify Reduce the size of JavaScript files

slide-106
SLIDE 106

CSS TRIMMING

grunt-uncss gulp-uncss-task Remove unused CSS rules

slide-107
SLIDE 107

TESTING

Frameworks: Jasmine & QUnit Runner: Karma Code Coverage: Istanbul

slide-108
SLIDE 108

LIVE RELOAD

grunt-contrib-watch gulp-livereload Reload automatically the web application if some files have been changed

slide-109
SLIDE 109

init concat jshint min unit server endtoend watch

WORKFLOW

slide-110
SLIDE 110
slide-111
SLIDE 111

Orion

Eclipse project Introduced in 2011 in the Eclipse Foundation

slide-112
SLIDE 112

Orion

Two versions: Jetty or Node.js

slide-113
SLIDE 113

Orion

npm install orion node node_modules/orion/server.js /projectpath

slide-114
SLIDE 114
slide-115
SLIDE 115

PROJECTS MANAGEMENT

slide-116
SLIDE 116
slide-117
SLIDE 117

EDITOR

slide-118
SLIDE 118
slide-119
SLIDE 119
slide-120
SLIDE 120

FIRST CLASS GIT SUPPORT

slide-121
SLIDE 121
slide-122
SLIDE 122
slide-123
SLIDE 123
slide-124
SLIDE 124
slide-125
SLIDE 125

SEARCH

slide-126
SLIDE 126
slide-127
SLIDE 127

PLUGINS

slide-128
SLIDE 128
slide-129
SLIDE 129
slide-130
SLIDE 130
slide-131
SLIDE 131
slide-132
SLIDE 132

READY TO DEPLOY

slide-133
SLIDE 133
slide-134
SLIDE 134
slide-135
SLIDE 135

DOCKER SUPPORT SOON

slide-136
SLIDE 136

WHAT ABOUT ECLIPSE?

slide-137
SLIDE 137

Back-end

Lot of tooling for Java development Jetty, EclipseLink, Webtools, etc

slide-138
SLIDE 138

Front-end

...

slide-139
SLIDE 139

WHAT ABOUT OTHERS?

slide-140
SLIDE 140
slide-141
SLIDE 141
slide-142
SLIDE 142
slide-143
SLIDE 143

Back-end

Lot of tooling for Java development Jetty, EclipseLink, Webtools, etc

slide-144
SLIDE 144
slide-145
SLIDE 145
slide-146
SLIDE 146

TO SUM UP

slide-147
SLIDE 147

THANKS!

Stéphane Bégaudeau Twitter: @sbegaudeau Google+: +stephane.begaudeau

The research leading to these results has received funding from the European Union’s Seventh Framework Program (FP7/2007-2013) for CRYSTAL – Critical System Engineering Acceleration Joint Undertaking under grant agreement № 332830 and from specific national programs and/or funding authorities.