MODERN WEB APPLICATION DEVELOPMENT WORKFLOW

Transcription

1 MODERN WEB APPLICATION DEVELOPMENT WORKFLOW

2 FIRST, LET S LOOK AT THE PAST

3

4 THROW A BUNCH OF HTML FILES

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

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

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

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

9

10

11

12 Node.js Server-side JavaScript

13 Node.js stand alone JavaScript runtime

14 Node.js stand alone JavaScript runtime using v8, Chrome s JavaScript engine

15 Node.js stand alone JavaScript applications

16 Node.js stand alone JavaScript applications created by JavaScript developers

17 Node.js stand alone JavaScript applications created by JavaScript developers for JavaScript developers

18 BRAND NEW WORLD

19 JAVASCRIPT DEVELOPMENT TOOLS

20 JAVASCRIPT DEVELOPMENT WORKFLOW

21 A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED

22 A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES

23 A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES

24 A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS

25 A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS -FIGHTS REGRESSIONS

26 A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS -FIGHTS REGRESSIONS -EASES THE RELEASE PROCESS

27 HOW TO GET STARTED?

28

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

30 YEOMAN scaffolding - structure - compilation - static analysis - dependencies management - development tools - unit testing

31 YEOMAN download > npm install -g yo -g global install

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

33 YEOMAN angular.js generator > npm install -g generator-angular

34 YEOMAN create an Angular project > yo angular

35 Select some dependencies

36 Choose some options

37 It creates the project

38 It downloads half of the internet

39 It uses some dark magic

40 Enjoy the view, Yeoman takes care of everything

41 What does the result look like?

42 STRUCTURE

43 CONTENT

44 DEPENDENCIES

45 DEV TOOLS

46 IT S MAGIC! and it will be your job to maintain it...

47 HAPPY?

48 BUT HOW DOES IT WORK?

49 YEOMAN HAS FRIENDS

50 BOWER

51

52 GRUNT

53

54 GULP

55

56 AND OTHERS

57 DEPENDENCIES MANAGEMENT

58 BOWER

59

60 BOWER Package manager for the web Born in 2012 Created by Twitter and other contributors over time

61 BOWER Download > npm install -g bower

62 Find a package: bower search

63 Find more information: bower info

64 BOWER Add a specific dependency > bower install jquery# save install jquery and save this new dependency

65 BOWER runtime dependencies in bower.json

66 DEPENDENCIES

67 BOWER Add all your dependencies > bower install

68 See your dependencies: bower list

69 BOWER Package management always comes with its set of problems:

70 BOWER Package management always comes with its set of problems: - how can I create a new package?

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?

72 Create a bower package: bower init

73 BOWER Use bower with Git > bower install

74 BOWER Host multiple versions > git tag -a 1.4 -m 'version 1.4' > bower install

75 BOWER Download > bower install jquery > bower install git://github.com/jquery/jquery.git

76 BOWER Registry A simple web server listing Git repository URLs

77 BOWER Register > bower register myrepository git > bower install myrepository

78 BUILD

79

80 GRUNT GULP

81 GRUNT GULP CONFIGURATION CODE

82 EQUALLY POWERFUL

83 GRUNT is a bit older so its ECOSYSTEM is more mature

84 Grunt and Gulp development tools dependencies in package.json >npm install

85 DEV TOOLS

86 GRUNT

87

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' } });

89 GRUNT Configuration in Gruntfile.js

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

91 GRUNT gruntfile.js structure 3 parts: -Task loading -Task configuration -Task registration

92 GRUNT An example: Static code analysis with JSHINT

93 GRUNT

94 HOW DO YOU USE IT? >grunt >grunt jshint:all

95 GULP

96

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'))

98 GULP Configuration in Gulpfile.js

99 GULP gulpfile.js structure 3 parts: - task loading - task configuration - task registration

100 GULP

101 GULP differences with Grunt node.js streams (asynchronous by nature) nice and simple api less IO operations

102 BUILD TASKS

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

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

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

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

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

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

109 WORKFLOW init concat jshint min unit server endtoend watch

110

111 Orion Eclipse project Introduced in 2011 in the Eclipse Foundation

112 Orion Two versions: Jetty or Node.js

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

114

115 PROJECTS MANAGEMENT

116

117 EDITOR

118

119

120 FIRST CLASS GIT SUPPORT

121

122

123

124

125 SEARCH

126

127 PLUGINS

128

129

130

131

132 READY TO DEPLOY

133

134

135 DOCKER SUPPORT SOON

136 WHAT ABOUT ECLIPSE?

137 Back-end Lot of tooling for Java development Jetty, EclipseLink, Webtools, etc

138 Front-end...

139 WHAT ABOUT OTHERS?

140

141

142

143 Back-end Lot of tooling for Java development Jetty, EclipseLink, Webtools, etc

144

145

146 TO SUM UP

147 THANKS! Stéphane Bégaudeau Google+: +stephane.begaudeau The research leading to these results has received funding from the European Union s Seventh Framework Program (FP7/ ) for CRYSTAL Critical System Engineering Acceleration Joint Undertaking under grant agreement and from specific national programs and/or funding authorities.