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
   

   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