The War is Over: Rails, JavaScript and Webpacker

Transcript

1. The War is Over Rails, javascript, and webpacker Jhun de Andres | RailsConf 2018
2. Jhun de Andres | RailsConf 2018 Jhun de Andres | RailsConf 2018
3. I’m Jhun Jhun de Andres | RailsConf 2018 Jhun de Andres | RailsConf 2018
4. I’m Jhun ( you can call me yung-jhun thats what my friends call me ) Jhun de Andres | RailsConf 2018 Jhun de Andres | RailsConf 2018
5. I’m Jhun github.com/ joshuajhun twitter.com/ joshuajhun instagram.com/ joshuajhun Founding Instructor @Turing School of Software & Design FEE Jhun de Andres | RailsConf 2018 Jhun de Andres | RailsConf 2018
6. A little bit about me… Jhun de Andres | RailsConf 2018
7. A little bit about me… Jhun de Andres | RailsConf 2018
8. A little bit about me… Jhun de Andres | RailsConf 2018
9. This is my awesome wife! Jhun de Andres | RailsConf 2018
10. This is my awesome wife! Jhun de Andres | RailsConf 2018
11. This is my awesome wife! Jhun de Andres | RailsConf 2018
12. This is my awesome wife! Jhun de Andres | RailsConf 2018
13. Jhun de Andres | RailsConf 2018
14. Goalz for today: Jhun de Andres | RailsConf 2018
15. Goalz for today: Jhun de Andres | RailsConf 2018
16. Goalz for today: - Developer understands the benefits of Webpacker Jhun de Andres | RailsConf 2018
17. Goalz for today: - Developer understands the benefits of Webpacker - Developers will not throw Jhun de Andres | RailsConf 2018
18. Goalz for today: - Developer understands the benefits of Webpacker - Developers will not throw tomatoes at me when Jhun de Andres | RailsConf 2018
19. Goalz for today: - Developer understands the benefits of Webpacker - Developers will not throw tomatoes at me when JS comes up on the screen Jhun de Andres | RailsConf 2018
20. Goalz for today: - Developer understands the benefits of Webpacker - Developers will not throw tomatoes at me when JS comes up on the screen Jhun de Andres | RailsConf 2018
21. Goalz for today: - Developer understands the benefits of Webpacker - Developers will not throw tomatoes at me when JS comes up on the screen - Developers will see testing JS isn’t as bad as they think Jhun de Andres | RailsConf 2018
22. Jhun de Andres | RailsConf 2018
23. Warmup question Jhun de Andres | RailsConf 2018
24. Warmup question ( plz pull out a notebook and pen and get ready to write! ) Jhun de Andres | RailsConf 2018
25. Jhun de Andres | RailsConf 2018
26. What are some of the frustrations you have with javascript inside of rails? Jhun de Andres | RailsConf 2018
27. What are some of the frustrations you have with javascript inside of rails? Answers like “cuz it sucks” is not constructive! Dig deep Jhun de Andres | RailsConf 2018
28. What are some of the frustrations you have with javascript inside of rails? Answers like “cuz it sucks” is not constructive! Dig deep Jhun de Andres | RailsConf 2018
29. Jhun de Andres | RailsConf 2018
30. Turn to the person next to you and share what you wrote! Jhun de Andres | RailsConf 2018
31. Turn to the person next to you and share what you wrote! Jhun de Andres | RailsConf 2018
32. Turn to the person next to you and share what you wrote! Jhun de Andres | RailsConf 2018
33. Jhun de Andres | RailsConf 2018
34. Top answers: Jhun de Andres | RailsConf 2018
35. Top answers: Jhun de Andres | RailsConf 2018
36. Top answers: - JS testing - JS errors - Adding Modules Jhun de Andres | RailsConf 2018
37. The Problem (real talk) Jhun de Andres | RailsConf 2018
38. Rails and JS don’t mix very well. Jhun de Andres | RailsConf 2018
39. Learning JS inside of rails is not very fun. Jhun de Andres | RailsConf 2018
40. because the view treats JS like a second class citizen Jhun de Andres | RailsConf 2018
41. Maybe our JS shouldn't be consider just an “asset” Jhun de Andres | RailsConf 2018
42. JS Jhun de Andres | RailsConf 2018
43. JS Jhun de Andres | RailsConf 2018
44. Culture around testing is great! Jhun de Andres | RailsConf 2018
45. Jhun de Andres | RailsConf 2018
46. Jhun de Andres | RailsConf 2018
47. Jhun de Andres | RailsConf 2018
48. Take 5 minutes and talk to the person next to you about how you’ve tested your JS / UI in the past. What made that process particularly difficult? Jhun de Andres | RailsConf 2018
49. Take 5 minutes and talk to the person next to you about how you’ve tested your JS / UI in the past. What made that process particularly difficult? ( Answers like “IDK I just did it” is not constructive! Dig deep ) Jhun de Andres | RailsConf 2018
50. Take 5 minutes and talk to the person next to you about how you’ve tested your JS / UI in the past. What made that process particularly difficult? ( Answers like “IDK I just did it” is not constructive! Dig deep ) Jhun de Andres | RailsConf 2018
51. Jhun de Andres | RailsConf 2018
52. I’m going to tell you a secret… Jhun de Andres | RailsConf 2018
53. Jhun de Andres | RailsConf 2018
54. Jhun de Andres | RailsConf 2018
55. Jhun de Andres | RailsConf 2018
56. The single most important thing web packer gives us is the ability to unit test our JS Jhun de Andres | RailsConf 2018
57. The single most important thing web packer gives us is the ability to unit test our JS Jhun de Andres | RailsConf 2018
58. Jhun de Andres | RailsConf 2018
59. Unit Tests: Jhun de Andres | RailsConf 2018
60. Unit Tests: Jhun de Andres | RailsConf 2018
61. Unit Tests: - They’re so fast! - Actual opportunity to refactor. - It forces us to understand the technologies we're using. - They're cheap especially if your functions are input output. Jhun de Andres | RailsConf 2018
62. Jhun de Andres | RailsConf 2018
63. - They’re slow. - Fragile. - They're expensive. Jhun de Andres | RailsConf 2018
64. Wait. Does that mean the I shouldn’t use the Asset Pipeline? Jhun de Andres | RailsConf 2018
65. Wait. Does that mean the I shouldn’t use the Asset Pipeline? Jhun de Andres | RailsConf 2018
66. Jhun de Andres | RailsConf 2018
67. Asset Pipeline: Jhun de Andres | RailsConf 2018
68. Asset Pipeline: Jhun de Andres | RailsConf 2018
69. Asset Pipeline: - Concatenates - Minifies - Allows for uses of abstract languages Jhun de Andres | RailsConf 2018
70. Based on the scale of your app that might be enough. Jhun de Andres | RailsConf 2018
71. So what’s webpack? Jhun de Andres | RailsConf 2018
72. Webpack is a module bundler. Jhun de Andres | RailsConf 2018
73. Node.js has supported modular design since the start. Jhun de Andres | RailsConf 2018
74. not the case on the front end. Jhun de Andres | RailsConf 2018
75. not the case on the front end. Jhun de Andres | RailsConf 2018
76. Webpack builds a dependency graph Jhun de Andres | RailsConf 2018
77. main.bundle.js Jhun de Andres | RailsConf 2018
78. you’ll typically get a webpack.config file Jhun de Andres | RailsConf 2018
79. Jhun de Andres | RailsConf 2018
80. Webpack: Jhun de Andres | RailsConf 2018
81. Webpack: Jhun de Andres | RailsConf 2018
82. Webpack: - Entry - Output - Loaders - Plugins Jhun de Andres | RailsConf 2018
83. Webpack: - Entry - Output - Loaders - Plugins Jhun de Andres | RailsConf 2018
84. Webpack: - Entry - Output - Loaders - Plugins Jhun de Andres | RailsConf 2018
85. Webpack: - Entry - Output - Loaders - Plugins Jhun de Andres | RailsConf 2018
86. Webpack: - Entry - Output - Loaders - Plugins Jhun de Andres | RailsConf 2018
87. Webpack: - Entry - Output - Loaders - Plugins So how does webpacker make my life easier? Jhun de Andres | RailsConf 2018
88. It abstracts the javascript “out of” the traditional Asset Pipeline Jhun de Andres | RailsConf 2018
89. And moves that logic into a “separate” front-end application. Jhun de Andres | RailsConf 2018
90. This allows for further control of our front-end application Jhun de Andres | RailsConf 2018
91. And JavaScript development is in a better environment. Jhun de Andres | RailsConf 2018
92. you might be thinking to yourself… Jhun de Andres | RailsConf 2018
93. you might be thinking to yourself… Jhun de Andres | RailsConf 2018
94. That might have been an appropriate response 2 years ago… Jhun de Andres | RailsConf 2018
95. Jhun de Andres | RailsConf 2018
96. but it’s 2018 Jhun de Andres | RailsConf 2018
97. Jhun de Andres | RailsConf 2018
98. And your user is getting mad because your app is slow / the page refreshed. Jhun de Andres | RailsConf 2018
99. Jhun de Andres | RailsConf 2018
100. Some of our users might still be using this as a phone Jhun de Andres | RailsConf 2018
101. Some of our users might still be using this as a phone Jhun de Andres | RailsConf 2018
102. Some of our users might still be using this as a phone Jhun de Andres | RailsConf 2018
103. Some of our users might still be using this as a phone Jhun de Andres | RailsConf 2018
104. Some of our users might still be using this as a phone Jhun de Andres | RailsConf 2018
105. Some of our users might still be using this as a phone Jhun de Andres | RailsConf 2018
106. Some of our users might still be using this as a phone Jhun de Andres | RailsConf 2018
107. take a look at these stats Jhun de Andres | RailsConf 2018
108. Attention Span 0 3 6 9 12 Human (2017) Gold Fish Human (2000) 0 seconds 0 seconds 0 seconds Source: Hosting Facts Jhun de Andres | RailsConf 2018
109. Attention Span 0 3 6 9 12 Human (2017) Gold Fish Human (2000) 12 seconds 9 seconds 8 seconds Attention Span 0 3 6 9 12 Human (2017) Gold Fish Human (2000) 12 seconds 9 seconds 8 seconds Source: Hosting Facts Jhun de Andres | RailsConf 2018
110. Internet Traffic Mobile (2017) Mobile (2016) Desktop (2017) 0 15 30 45 60 0% 0% 0% Source: Hosting Facts Jhun de Andres | RailsConf 2018
111. Internet Traffic Mobile (2017) Mobile (2016) Desktop (2017) 0 15 30 45 60 47.79% 42.16% 52% Internet Traffic Mobile (2017) Mobile (2016) Desktop (2017) 0 15 30 45 60 47.79% 42.16% 52% Source: Hosting Facts Jhun de Andres | RailsConf 2018
112. Internet Traffic Mobile (2017) Mobile (2016) Desktop (2017) 0 15 30 45 60 47.79% 42.16% 52% Internet Traffic Mobile (2017) Mobile (2016) Desktop (2017) 0 15 30 45 60 47.79% 42.16% 52% Source: Hosting Facts There are more mobile Internet users than desktop Internet users. There are 3.5 billion global mobile Internet users as of August 2017. “ Jhun de Andres | RailsConf 2018
113. It doesn’t matter if our AR queries are efficient Jhun de Andres | RailsConf 2018
114. if the front end is slow… Jhun de Andres | RailsConf 2018
115. Jhun de Andres | RailsConf 2018
116. Front-end Stack Jhun de Andres | RailsConf 2018
117. Front-end Stack Jhun de Andres | RailsConf 2018
118. Jhun de Andres | RailsConf 2018
119. Jhun de Andres | RailsConf 2018
120. Lets talk about testing. Jhun de Andres | RailsConf 2018
121. Before we do that I want to mention that a lot of this is possible because of Jhun de Andres | RailsConf 2018
122. Before we do that I want to mention that a lot of this is possible because of Jhun de Andres | RailsConf 2018
123. Before we do that I want to mention that a lot of this is possible because of Jhun de Andres | RailsConf 2018
124. Jhun de Andres | RailsConf 2018
125. NPM provides our modules. Jhun de Andres | RailsConf 2018
126. NPM provides our modules. Yarn is our package manager. Jhun de Andres | RailsConf 2018
127. jest - framework agnostic testing framework. Jhun de Andres | RailsConf 2018
128. enzyme - test utility that makes it a lot easier to traverse the virtual dom. Jhun de Andres | RailsConf 2018
129. lets take sometime to checkout documentation! Jhun de Andres | RailsConf 2018
130. Greatest Hits: - jest.fn() - instance() -enzyme - find() -enzyme Jhun de Andres | RailsConf 2018
132. Lets code some stuff….