How to learn modern front-end technologies - with the fascination of OSS

Transcript

1. How to learn modern front-end technologies - with the fascination of OSS Mar 13, 2021 ٕҭࡇ2021 #ٕҭࡇ #ϗʔϧB kkeeth @kuwahara_jsri @clown0082
2. in the past
4. …go on now
5. ɾTypeScript ɾSass/Scss Alt Linter/Formatter ɾESLint ɾStylelint ɾPrettier CSS in JS ɾStyled components ɾEmotion ɾjss Bundler ɾwebpack ɾRollup ɾParcel Test ɾJest ɾEnzyme ɾTestCafe UI Library ɾReact/Next.js ɾVue/Nuxt.js ɾSvelte
6. ɾRedux ɾVuex ɾRecoil ɾRxJS Store CI/CD ɾCircleCI ɾAWS Amplify ɾAWS CodePipeline ʢJenkins…?ʣ AWS ɾAmplify ɾS3 ɾCloudFront ɾCodeCommit ɾCodeBuild ɾCodeDeploy Others ɾGraphQL(Apollo, graphql-*) ɾBFF ɾAtomic Design ɾEach CDN
7. Accessibility web components PWA Performance ʢlight houseʣ Secutiry …etc Other things to consider
8. It’s Chaos !!
9. But, we are Engineer. So we must choose technologies by the tech’s ocean🤔
10. My example Project A Project B Project C Nuxt.js AWS Amplify AWS Code* Next.js, LIFF TypeScript Recoil Jest Next.js TypeScript Apollo(GraphQL) Jest, Enzyme Docker Project D Nuxt.js Vuex vue-test-utils Express Docker
11. my example Project A Project B Project C Nuxt.js Amplify Code3 brothers Next.js TypeScript Recoil Jest LIFF Next.js TypeScript Apollo(GraphQL) Jest, Enzyme Docker Project D Nuxt.js Vuex vue-test-utils Express Docker Both developers and reviewers are expected to grasp a variety of technologies 💁
12. Present an example of how to learn the technology 🎉
13. Today’s my talk is NOT ONLY for front-end engineers, but for people in other professions and positions as well.
14. Let’s start my talk 😆
15. Agenda
16. Agenda What is a modern frontend? Learn the best way to learn for ourself Specifically, how to learn technology Use OSS and Communities
17. About me
18. const my_info = { Name: ‘܂ݪ੟ਔ’, Position1: ‘Servant Leader of FET’, Position2: ‘Board memer’, Community: ‘Riot.js, Ionic, DIST’, } About me note: I’m not a specialist, I'm a generalist
19. const my_career = { 201303: ‘Graduate School’, 201510: ’S-cubism inc’, 201708: ‘leprachaun.inc’, 202002: ‘YUMEMI Inc’, 202003: ‘YUMEMI, Board member’, } About me
20. 🙇 Sorry … & This slide is made in English. But I am unfamiliar using English. So, I may have a wrong expression. Plz feedback for me called “Masakari” about my English!!
21. What kind of environment is a modern front-end?
22. in the past
23. ɾWeb Server ɾWeb Application ɹ(both front-end and backend※) ɾDatabase(DB) ɾLog files ※ Backend doesn’t mean API monolithic
24. HTML(template engine), CSS, JavaScript monolithic Database Controller View Model Web Application Framework
25. HTML(template engine), CSS, JavaScript monolithic Database Controller View Model Web Application Framework Front-end and back-end are closely integrated 💁
26. in modern
27. modern Database Client(Front-end) Web API automatic build/deploy asynchronous controll UI by JavaScript
28. • GUI application built in JavaScript • Front-end development separated from backend • Single Page Application (SPA) • PWA, SSR, TypeScript, CI/CD, JAMStack…etc Some keywords
29. • GUI application built in JavaScript • Front-end development separated from backend • Single Page Application (SPA) • PWA, SSR, TypeScript, CI/CD, JAMStack…etc Some keywords
30. • GUI application built in JavaScript • Front-end development separated from backend • Single Page Application (SPA) • PWA, SSR, TypeScript, CI/CD, JAMStack…etc Some keywords
31. • GUI application built in JavaScript • Front-end development separated from backend • Single Page Application (SPA) • PWA, SSR, TypeScript, CI/CD, JAMStack…etc Some keywords Development using frameworks such as React, Vue, Svelte
32. • GUI application built in JavaScript • Front-end development separated from backend • Single Page Application (SPA) • PWA, SSR, TypeScript, CI/CD, JAMStack…etc Some keywords
33. • GUI application built in JavaScript • Front-end development separated from backend • Single Page Application (SPA) • PWA, SSR, TypeScript, CI/CD, JAMStack…etc Some keywords
34. What’s so great about modern?
35. 2 advantages Improving the user experience (UX) Improved developer experience (DX)
36. 2 advantages Improved developer experience (DX) Improving the user experience (UX)
37. 2 advantages Improving the user experience (UX) Improved developer experience (DX)
38. Learn the best way to learn for ourself
39. Learning methods
40. Ebbinghous’s Forgetting Curve
41. s
42. Curve of Forgetting by Uwaterloo University
43. URL: https://uwaterloo.ca/campus-wellness/curve-forgetting?
44. Create a learning style that works best for us !!😆
45. Specifically, how to learn technology
46. Basically, make a list of things you're going to learn and work on them from one end to the other!! 💪 Conclusion
47. Conclusion
48. Should we study multiple frameworks / libraries at the same time?
49. No. It is recommended to study one of the most famous frameworks in depth 💁
50. Frameworks have common features Routing Lifecycle functions Data binding Config for build State management
51. What is the best medium of study to choose?
52. First, exposure to primary information(e.g. tutorials on official websites).
53. Next, “create something app” or “video learning service” 💁
54. First, exposure to primary information(e.g. tutorials on official websites). It is advisable to avoid exposure to secondary information as much as possible at the time of initial study.🤔 e.g. Qiita, Zenn
55. Which library should we choose to study?
56. URL: https://2020.stateofjs.com/en-US/
57. URL: https://2020.stateofjs.com/en-US/ Get answers from engineers around the world! 😄
58. Use OSS and Communities
59. OSS = Open Source Software
60. ೔ຊOSSਪਐϑΥʔϥϜ: http://ossforum.jp/jossfiles/20200630_OSSௗᛌਤ.pdf
61. All of these are open source libraries 😆 ೔ຊOSSਪਐϑΥʔϥϜ: http://ossforum.jp/jossfiles/20200630_OSSௗᛌਤ.pdf
62. ୅දతͳϑϩϯτΤϯυͷϥ ΠϒϥϦͷϩΰΛஔ͘ Please be aware that OSS has a license 💁 (If the license is MIT, there is no problem)
64. Why I recommend OSS ?🤔
65. 👍 Get feedback from engineers around the world. 👍 Read code from engineers around the world 👍 Can lead to self-branding Why I recommend OSS?
66. github.com/riot
67. npmjs.com/~kkeeth
68. ja-greetings npm-stats-api get-connpass-items wcmd %- 9127 2463 2273 1506 My libs download stats cmd-ranking @kkeeth/card check-stats-modules riot-barcode %- 912 402 352 314
69. How do we get started with OSS ?🤔
70. • Updating documents such as README • Japanese translation of the official site • Personal library development • Updating the sample repository • Throwing PR to famous repositories Examples of how to start OSS easy difficult
71. Why do I recommend joining the community ?🤔
72. 👍 More chances to get a variety of new information 👍 More slots for help when you need it 👍 Possibility of unanticipated developments Why I recommend communities?
73. Published a book on Riot.js 🎉
74. https://note.com/clown0082/n/n7549641e5a9e
75. Summary
76. ❖ What is a modern frontend? ❖ Learn the best way to learn for ourself ❖ Specifically, how to learn technology ❖ Use OSS and Communities
77. The guys who enjoy technology are the strongest 😆