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

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

kkeeth
March 13, 2021

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

kkeeth

March 13, 2021
Tweet

More Decks by kkeeth

Other Decks in Technology

Transcript

  1. How to learn modern front-end technologies - with the fascination

    of OSS Mar 13, 2021 ٕҭࡇ2021 #ٕҭࡇ #ϗʔϧB kkeeth @kuwahara_jsri @clown0082
  2. ɾ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
  3. ɾ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
  4. 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
  5. 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 💁
  6. Today’s my talk is NOT ONLY for front-end engineers, but

    for people in other professions and positions as well.
  7. Agenda What is a modern frontend? Learn the best way

    to learn for ourself Specifically, how to learn technology Use OSS and Communities
  8. 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
  9. const my_career = { 201303: ‘Graduate School’, 201510: ’S-cubism inc’,

    201708: ‘leprachaun.inc’, 202002: ‘YUMEMI Inc’, 202003: ‘YUMEMI, Board member’, } About me
  10. 🙇 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!!
  11. HTML(template engine), CSS, JavaScript monolithic Database Controller View Model Web

    Application Framework Front-end and back-end are closely integrated 💁
  12. • GUI application built in JavaScript • Front-end development separated

    from backend • Single Page Application (SPA) • PWA, SSR, TypeScript, CI/CD, JAMStack…etc Some keywords
  13. • GUI application built in JavaScript • Front-end development separated

    from backend • Single Page Application (SPA) • PWA, SSR, TypeScript, CI/CD, JAMStack…etc Some keywords
  14. • GUI application built in JavaScript • Front-end development separated

    from backend • Single Page Application (SPA) • PWA, SSR, TypeScript, CI/CD, JAMStack…etc Some keywords
  15. • 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
  16. • GUI application built in JavaScript • Front-end development separated

    from backend • Single Page Application (SPA) • PWA, SSR, TypeScript, CI/CD, JAMStack…etc Some keywords
  17. • GUI application built in JavaScript • Front-end development separated

    from backend • Single Page Application (SPA) • PWA, SSR, TypeScript, CI/CD, JAMStack…etc Some keywords
  18. s

  19. Basically, make a list of things you're going to learn

    and work on them from one end to the other!! 💪 Conclusion
  20. No. It is recommended to study one of the most

    famous frameworks in depth 💁
  21. 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
  22. 👍 Get feedback from engineers around the world. 👍 Read

    code from engineers around the world 👍 Can lead to self-branding Why I recommend OSS?
  23. 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
  24. • 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
  25. 👍 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?
  26. ❖ What is a modern frontend? ❖ Learn the best

    way to learn for ourself ❖ Specifically, how to learn technology ❖ Use OSS and Communities