spring-js-cources-2018

Practical-oriented javascript courses for newbies

Table of contents

• Applications
• Curriculum
• Extra task
• Self study

Applications

• Terminal
• Web client
• Server
• Desktop
• Mobile

Curriculum

1. Intro

2. Program review. NodeJS & npm. Git.

   We will try to answer on following questions: What is this? How to use? Why do we need this tools?

   Useful links:

   • https://nodejs.org/en/
   • https://www.npmjs.com/
   • https://github.com/
   • https://git-scm.com/book/en/v2
   • https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow
   • https://docs.gitlab.com/ce/workflow/README.html
   • https://nodejs.org/en/docs/inspector/

3. Terminal app

   • Setup application. Requirements analysis.

     Useful links:

     • https://scotch.io/tutorials/build-an-interactive-command-line-application-with-nodejs
     • https://www.npmjs.com/package/commander
     • https://www.npmjs.com/package/inquirer
     • https://developer.mozilla.org/ru/docs/Web/JavaScript/EventLoop

   • Implement business logic.

     Implement application requirements.

   • Implement business logic.

     Implement application requirements.

4. HTML/CSS

   • Lesson 1 Useful links:

     • https://htmlacademy.ru/courses/4/run/1
     • http://flexboxfroggy.com
     • https://www.freecodecamp.org/map-aside#nested-collapseHTML5andCSS

   • Lesson 2 Task with a star (not required) - Create markup using BEM for Todo App

   • Lesson 3 Task with a star (not required) - Style markup for Todo App

5. Intermediate check

   Terminal application made by students should be verified by experts.

6. Web client app

   • Application setup

     Setup application using modern developer tools. Introduce create-react-app.

     Useful links:

     • https://webpack.js.org/
     • https://webpack.js.org/configuration/dev-server/
     • https://github.com/facebook/create-react-app
     • https://gulpjs.com/
     • https://rollupjs.org/guide/en
     • https://learn.javascript.ru/modules
     • https://babeljs.io/
     • https://eslint.org/

   • Introduction to React

     Introduction into react basics

     Useful links:

     • https://reactjs.org/

   • UI implementation

   • UI implementation

   • Migrate terminal app to Web Client

     Business logic implemented for terminal app should be migrated to Web Client app.

   • Architectural mistakes analysis

     Highlight and analyse mistakes made during implementation of terminal app. Fix this mistakes.

     Useful links:

     • http://usejsdoc.org/

   • Persist application data into local storage

     Make application persist changes made by user.

7. Code quality

8. ????

9. ????

10. Intermediate check

    Web Client application made by students should be verified by experts.

11. Server app

    • Client-Server architecture. REST basics. Setup NodeJS server app

      Useful links:

      • What is a RESTful API?
      • express
      • Postman
      • Nodemon
      • babel-node
      • NodeJS Screencast

    • Move business logic to server side

    • Architectural mistakes analysis

      Highlight and analyse mistakes made during implementation of Web Client app. Fix this mistakes. Improve components modularity

    • Unit tests

      Importance of testing will be discussed. Discover testing approaches. Cover implemented business logic by unit tests.

    • Persist application data into MongoDB

      Useful links:

      • https://www.mongodb.com/
      • https://mongodb.github.io/node-mongodb-native/
      • http://mongoosejs.com/
      • Robo 3T
      • mongodb

12. ????

13. ????

14. ????

15. Intermediate check

    Client-Server application made by students should be verified by experts.

16. Desktop app

    • Introduction to electron. Application setup

      Useful links:

      • https://electronjs.org/

    • Migrate client application to electron

      Application business logic should be migrated without any problems

Extra task

Run TODO application on mobile using React Native

Useful links:

• https://facebook.github.io/react-native/

Self study

JavaScript:

• https://learn.javascript.ru/
• https://www.youtube.com/playlist?list=PL363QX7S8MfSxcHzvkNEqMYbOyhLeWwem
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types

HTML/CSS:

• https://htmlacademy.ru/
• https://www.youtube.com/playlist?list=PL026CCEB5125879C2
• https://www.w3schools.com/css/

General IT skills:

• https://yandexdataschool.ru/edu-process/courses/algorithms
• https://www.ozon.ru/context/detail/id/2457392/
• https://epa.ms/code-battle
• https://developer.chrome.com/devtools