$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

  2. in the past

    View Slide

  3. View Slide

  4. …go on now

    View Slide

  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

    View Slide

  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

    View Slide

  7. Accessibility
    web components
    PWA
    Performance
    ʢlight houseʣ
    Secutiry
    …etc
    Other things to consider

    View Slide

  8. It’s Chaos !!

    View Slide

  9. But, we are Engineer.
    So we must choose technologies
    by the tech’s ocean🤔

    View Slide

  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

    View Slide

  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 💁

    View Slide

  12. Present an example of how
    to learn the technology 🎉

    View Slide

  13. Today’s my talk is NOT ONLY
    for front-end engineers,
    but for people in other
    professions and positions as well.

    View Slide

  14. Let’s start my talk 😆

    View Slide

  15. Agenda

    View Slide

  16. Agenda
    What is a modern frontend?
    Learn the best way to learn for ourself
    Specifically, how to learn technology
    Use OSS and Communities

    View Slide

  17. About me

    View Slide

  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

    View Slide

  19. const my_career = {
    201303: ‘Graduate School’,
    201510: ’S-cubism inc’,
    201708: ‘leprachaun.inc’,
    202002: ‘YUMEMI Inc’,
    202003: ‘YUMEMI, Board member’,
    }
    About me

    View Slide

  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!!

    View Slide

  21. What kind of
    environment is a
    modern front-end?

    View Slide

  22. in the past

    View Slide

  23. ɾWeb Server
    ɾWeb Application
    ɹ(both front-end and backend※)
    ɾDatabase(DB)
    ɾLog files
    ※ Backend doesn’t mean API
    monolithic

    View Slide

  24. HTML(template engine),
    CSS, JavaScript
    monolithic
    Database
    Controller
    View Model
    Web Application Framework

    View Slide

  25. HTML(template engine),
    CSS, JavaScript
    monolithic
    Database
    Controller
    View Model
    Web Application Framework
    Front-end and back-end
    are closely integrated 💁

    View Slide

  26. in modern

    View Slide

  27. modern
    Database
    Client(Front-end) Web API
    automatic
    build/deploy
    asynchronous
    controll UI
    by JavaScript

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  34. What’s so great about modern?

    View Slide

  35. 2 advantages
    Improving the user
    experience (UX)
    Improved developer
    experience (DX)

    View Slide

  36. 2 advantages
    Improved developer
    experience (DX)
    Improving the user
    experience (UX)

    View Slide

  37. 2 advantages
    Improving the user
    experience (UX)
    Improved developer
    experience (DX)

    View Slide

  38. Learn the best
    way to learn for
    ourself

    View Slide

  39. Learning methods

    View Slide

  40. Ebbinghous’s Forgetting
    Curve

    View Slide

  41. s

    View Slide

  42. Curve of Forgetting
    by Uwaterloo University

    View Slide

  43. URL: https://uwaterloo.ca/campus-wellness/curve-forgetting?

    View Slide

  44. Create a learning style
    that works best for us !!😆

    View Slide

  45. Specifically, how to
    learn technology

    View Slide

  46. Basically, make a list of things
    you're going to learn and work
    on them from one end to the
    other!! 💪
    Conclusion

    View Slide

  47. Conclusion

    View Slide

  48. Should we study multiple
    frameworks / libraries at the
    same time?

    View Slide

  49. No.
    It is recommended to study one
    of the most famous frameworks
    in depth 💁

    View Slide

  50. Frameworks have common features
    Routing
    Lifecycle
    functions
    Data
    binding
    Config
    for build
    State
    management

    View Slide

  51. What is the best medium of
    study to choose?

    View Slide

  52. First, exposure to primary
    information(e.g. tutorials on
    official websites).

    View Slide

  53. Next, “create something app”
    or “video learning service” 💁

    View Slide

  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

    View Slide

  55. Which library should we
    choose to study?

    View Slide

  56. URL: https://2020.stateofjs.com/en-US/

    View Slide

  57. URL: https://2020.stateofjs.com/en-US/
    Get answers from engineers
    around the world! 😄

    View Slide

  58. Use OSS and
    Communities

    View Slide

  59. OSS = Open Source Software

    View Slide

  60. ೔ຊOSSਪਐϑΥʔϥϜ: http://ossforum.jp/jossfiles/20200630_OSSௗᛌਤ.pdf

    View Slide

  61. All of these are open source libraries 😆
    ೔ຊOSSਪਐϑΥʔϥϜ: http://ossforum.jp/jossfiles/20200630_OSSௗᛌਤ.pdf

    View Slide

  62. ୅දతͳϑϩϯτΤϯυͷϥ
    ΠϒϥϦͷϩΰΛஔ͘
    Please be aware that OSS has a license 💁
    (If the license is MIT, there is no problem)

    View Slide

  63. View Slide

  64. Why I recommend OSS ?🤔

    View Slide

  65. 👍 Get feedback from engineers around
    the world.
    👍 Read code from engineers around the
    world
    👍 Can lead to self-branding
    Why I recommend OSS?

    View Slide

  66. github.com/riot

    View Slide

  67. npmjs.com/~kkeeth

    View Slide

  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

    View Slide

  69. How do we get started
    with OSS ?🤔

    View Slide

  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

    View Slide

  71. Why do I recommend joining
    the community ?🤔

    View Slide

  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?

    View Slide

  73. Published a book on Riot.js 🎉

    View Slide

  74. https://note.com/clown0082/n/n7549641e5a9e

    View Slide

  75. Summary

    View Slide

  76. ❖ What is a modern frontend?
    ❖ Learn the best way to learn for ourself
    ❖ Specifically, how to learn technology
    ❖ Use OSS and Communities

    View Slide

  77. The guys who enjoy
    technology are the
    strongest 😆

    View Slide

  78. View Slide