ITRI 0X000, ICL Technology sharing presentation

1. Web developer,
Front-end,
2018
Kevin(5F) 黃彥軒
A40503, 0X000, ICL

2. Web developer
Front-end
2018
2

3. Background
3

4. Background
• Content manual
4

5. Background
• Content manual
• Dynamic content
5

6. Background
• Content manual
• Dynamic content
• Only back-end
6

7. Background
7

8. Background
8

9. Background
CGI → PHP
9

10. Background
CGI → PHP → Template language
10

11. Background
CGI → PHP → Template language → Server : MVC
11

12. Background
12

13. Background
13

14. Background
Rich Internet Application
14

15. Background
Server web framework
15

16. Background
Server web framework
16

17. Background
Front-end = View of web framework
17

18. Background
Front-end = View of web framework
18

19. Background
Server → Browser
19https://www.google.com.tw/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&uact=8&ved=0ahUKEwjd84e75PzYAhWCrJQKHZXOCuMQFggzMAI&url=http%3A%2F%2F2017.jsconf.cn%2Ffiles%2F02-modern-web-dev-
dexteryy.pdf&usg=AOvVaw1A3WzVM3ISdLkNyUTvemGY

20. 20

21. https://codeburst.io/the-2018-web-developer-roadmap-826b1b806e8d
https://github.com/kamranahmedse/developer-roadmap
21

22. 22

23. 23
https://www.ithome.com.tw/voice/97360
全端開發者神話
https://dwqs.gitbooks.io/frontenddevhandbook/content/practi
ce/full-stack.html

24. Web developer
Front-end
2018
24

25. Basic
Render
Framework
Module
Style
Bundler
25

26. Basic
Render
Framework
Module
Style
Bundler
https://github.com/nefe/You-Dont-Need-jQuery
http://youmightnotneedjquery.com/
26

27. Basic
Render
Framework
Module
Style
Bundler
http://vanilla-js.com/
27

28. Basic
Render
Framework
Module
Style
Bundler Server side render Client side render
https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
28

29. Basic
Render
Framework
Module
Style
Bundler
29

30. Basic
Render
Framework
Module
Style
Bundler
30

31. Basic
Render
Framework
Module
Style
Bundler
Server-side pros:
1.Search engines can crawl the site for better SEO.
2.The initial page load is faster.
3.Great for static sites.
Server-side cons:
1.Frequent server requests.
2.An overall slow page rendering.
3.Full page reloads.
4.Non-rich site interactions.
https://medium.freecodecamp.org/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d
31

32. Basic
Render
Framework
Module
Style
Bundler
Client-side pros:
1. Rich site interactions
2. Fast website rendering after the initial load.
3. Great for web applications.
4. Robust selection of JavaScript libraries.
Client-side cons:
1. Low SEO if not implemented correctly.
2. Initial load might require more time.
3. In most cases, requires an external library.
32

33. Basic
Render
Framework
Module
Style
Bundler
33

34. Basic
Render
Framework
Module
Style
Bundler
34

35. Basic
Render
Framework
Module
Style
Bundler
35

36. Basic
Render
Framework
Module
Style
Bundler
36

37. Basic
Render
Framework
Module
Style
Bundler
37
React.js Angular vue.js

38. Basic
Render
Framework
Module
Style
Bundler
38
React.js Angular vue.js

39. Basic
Render
Framework
Module
Style
Bundler
39
React.js Angular vue.js
……

40. Basic
Render
Framework
Module
Style
Bundler
40
https://stateofjs.com/2017/introduction/

41. Basic
Render
Framework
Module
Style
Bundler
41

42. Basic
Render
Framework
Module
Style
Bundler
42
Every framework have own technology tree.

43. Basic
Render
Framework
Module
Style
Bundler
43

44. Basic
Render
Framework
Module
Style
Bundler
44

45. Basic
Render
Framework
Module
Style
Bundler
45

46. Basic
Render
Framework
Module
Style
Bundler
46

47. Basic
Render
Framework
Module
Style
Bundler
47

48. Basic
Render
Framework
Module
Style
Bundler
48
• redux-loop
• redux-thunk
• redux-promise
…

49. Basic
Render
Framework
Module
Style
Bundler
49

50. Basic
Render
Framework
Module
Style
Bundler
50
Package manager

51. Basic
Render
Framework
Module
Style
Bundler
51http://www.modulecounts.com/

52. 52

53. Basic
Render
Framework
Module
Style
Bundler
53
Design Flow

54. Basic
Render
Framework
Module
Style
Bundler
54
https://blog.akanelee.me/posts/276909-beginners-of-prototype/
https://hellolynn.hpd.io/2017/06/22/wireframe%E3%80%81mockup%E8%88%87prototype%E7%9A%84%E5%B7%AE
%E7%95%B0%EF%BC%9F%E4%BE%86%E7%9C%8B%E7%9C%8B%E5%AE%8C%E6%95%B4%E7%9A%84%E7%94%A2%
E5%93%81ui%E8%A8%AD%E8%A8%88%E6%B5%81%E7%A8%8B/
Design Flow
1.Feature

55. Basic
Render
Framework
Module
Style
Bundler
55
https://blog.akanelee.me/posts/276909-beginners-of-prototype/
https://hellolynn.hpd.io/2017/06/22/wireframe%E3%80%81mockup%E8%88%87prototype%E7%9A%84%E5%B7%AE
%E7%95%B0%EF%BC%9F%E4%BE%86%E7%9C%8B%E7%9C%8B%E5%AE%8C%E6%95%B4%E7%9A%84%E7%94%A2%
E5%93%81ui%E8%A8%AD%E8%A8%88%E6%B5%81%E7%A8%8B/
Design Flow
1.Feature → 2.Wireframe

56. Basic
Render
Framework
Module
Style
Bundler
56
https://blog.akanelee.me/posts/276909-beginners-of-prototype/
https://hellolynn.hpd.io/2017/06/22/wireframe%E3%80%81mockup%E8%88%87prototype%E7%9A%84%E5%B7%AE
%E7%95%B0%EF%BC%9F%E4%BE%86%E7%9C%8B%E7%9C%8B%E5%AE%8C%E6%95%B4%E7%9A%84%E7%94%A2%
E5%93%81ui%E8%A8%AD%E8%A8%88%E6%B5%81%E7%A8%8B/
Design Flow
1.Feature → 2.Wireframe → 3.Mockup

57. Basic
Render
Framework
Module
Style
Bundler
57
https://blog.akanelee.me/posts/276909-beginners-of-prototype/
https://hellolynn.hpd.io/2017/06/22/wireframe%E3%80%81mockup%E8%88%87prototype%E7%9A%84%E5%B7%AE
%E7%95%B0%EF%BC%9F%E4%BE%86%E7%9C%8B%E7%9C%8B%E5%AE%8C%E6%95%B4%E7%9A%84%E7%94%A2%
E5%93%81ui%E8%A8%AD%E8%A8%88%E6%B5%81%E7%A8%8B/
Design Flow
1.Feature → 2.Wireframe → 3.Mockup → 4.Prototype
Magic

58. Basic
Render
Framework
Module
Style
Bundler
58
HTML / CSS Framework

59. Basic
Render
Framework
Module
Style
Bundler
59
HTML / CSS Framework

60. Basic
Render
Framework
Module
Style
Bundler
60
CSS Preprocessor
• Sass
• Less
• stylus
https://www.slideshare.net/wantingj/css-preprocessor-sass-44533096

61. Basic
Render
Framework
Module
Style
Bundler
61

62. Basic
Render
Framework
Module
Style
Bundler
62

63. Basic
Render
Framework
Module
Style
Bundler
63

64. Basic
Render
Framework
Module
Style
Bundler
64
• Tree Shaking
• Uglifyjs
• Compression
• Code Splitting
Bundle Optimization

65. Basic
Render
Framework
Module
Style
Bundler
65
• Tree Shaking: Dead-code elimination.
• Uglifyjs
• Compression
• Code Splitting
Bundle Optimization

66. Basic
Render
Framework
Module
Style
Bundler
66
• Tree Shaking: Dead-code elimination.
• Uglifyjs: Generate AST(Abstract syntax tree).
• Compression
• Code Splitting
Bundle Optimization

67. Basic
Render
Framework
Module
Style
Bundler
67
• Tree Shaking: Dead-code elimination.
• Uglifyjs: Generate AST(Abstract syntax tree).
• Compression: Build gzip.
• Code Splitting
Bundle Optimization

68. Basic
Render
Framework
Module
Style
Bundler
68
• Tree Shaking: Dead-code elimination.
• Uglifyjs: Generate AST(Abstract syntax tree).
• Compression: Build gzip.
• Code Splitting: Code Splitting.
Bundle Optimization

69. Basic
Render
Framework
Module
Style
Bundler
69
Bundle Analysis
webpack-bundle-analyzer

70. Basic
Render
Framework
Module
Style
Bundler
70
Bundle Analysis
webpack-bundle-analyzer

71. Basic
Render
Framework
Module
Style
Bundler
71
Bundle Analysis
https://github.com/ITRI-ICL-DivX/dnn-web-portal

72. Basic
Render
Framework
Module
Style
Bundler
72
That’s all ?

73. Basic
Render
Framework
Module
Style
Bundler
Testing
73
That’s all ?
Certainly not!

74. Basic
Render
Framework
Module
Style
Bundler
Testing
Analysis
74
That’s all ?
Certainly not!

75. Basic
Render
Framework
Module
Style
Bundler
Testing
Analysis
Security
75
That’s all ?
Certainly not!

76. Basic
Render
Framework
Module
Style
Bundler
Testing
Analysis
Security
… 76
That’s all ?
Certainly not!

77. 77
Learning ?

78. 78
Learning ?

79. 79
Learning ?

80. 80
Learning ?
Starter-kit

81. 81
Learning ?
Boilerplate

82. 82
Learning ?

83. Web developer
Front-end
2018
83

84. 84https://insights.stackoverflow.com/survey/2017

85. 85
SPA (Single-page websites)

86. 86
PWA(Progressive Web Applications)

87. 87
WebAssembly
https://blog.techbridge.cc/2017/06/17/webassembly-js-future/

88. https://zhuanlan.zhihu.com/p/20933749
http://blog.fens.me/nodejs-uglifyjs2-js/
https://huangxuan.me/2017/02/09/nextgen-web-pwa/
https://clockwise.software/blog/web-development-trends-in-2018/
https://blog.techbridge.cc/2017/06/17/webassembly-js-future/
88

89. 89
Thank you !