Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

3135a28c51dfa27396bb525e9972db95?s=47 kkeeth
March 13, 2021

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

3135a28c51dfa27396bb525e9972db95?s=128

kkeeth

March 13, 2021
Tweet

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

  3. None
  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)
  63. None
  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 😆

  78. None