This learning map is for the engineers who are leveling up. efforts and direct them to the right resources for the various technologies used on the platform. Javascript Foundations Javascript is a broad language and to understand it completely you need a proper understanding of a few concepts and best practices, here are some few gems to get you acquainted with various javascript concepts and technologies. Here is a diagram to guide your leveling up efforts in javascript and it’s foundational aspects.
Javascript fundamentals workshop
Introduction to iterators and generators
Javascript scope chains and closures
Blog-post on AJAX calls using the fetch API
Level up on the changes ES6 introduces
Getting started with javascript
HTML, CSS and Javascript big picture
NodeJS is a javascript runtime environment that allows us to execute Javascript on the server-side. For NodeJS the javascript is executed in the server unlike normal javascript executed on the client’s computers. We are however using express as our web framework to ease our NodeJS development. Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications. Here is a diagram to guide your efforts on learning the NodeJS technology and building a strong foundation in its use in the team.
https://www.github.com/workshopper/learnyounode [Interactive workshop of getting your up to speed with NodeJS] https://github.com/azat-co/expressworks [Interactive workshop for getting up to speed with the fundamentals to express] https://app.pluralsight.com/library/courses/api-design-nodejs-express-mongo/table-of-contents [Video tutorial on how NodeJS and Express integrate]
https://app.pluralsight.com/library/courses/postgresql-getting-started/table-of-contents [Video tutorial for Postgress introduction] https://scotch.io/tutorials/getting-started-with-node-express-and-postgres-using-sequelize [Blog post on sequlize] http://docs.sequelizejs.com/manual/installation/getting-started.html [Sequlize documentation]
Socket.io is the web framework of the choice of managing sockets for the team. The main reason we chose socket.io was that it plays nicely with NodeJS.
https://socket.io/get-started/chat/ [Demo to get your beak wet with sockets] https://socket.io/docs/ [Documentation on socket.io] https://app.pluralsight.com/library/courses/socket-io-building-real-time-applications/table-of-contents [Video tutorial on socket.io]
Our frontend currently consists of React & Redux & Socket.io. The core of our frontend is React where we use Redux(Saga) to manage our state and share information between the components. Socket.io is pulled in to manage our socket layer on the front-end as we use the same framework on the backend too. React React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. It is important to learn how to think in react and understand how to break down complex UI into simple components that allow us to compose this complex UI. Here is a diagram to guide your leveling up on the technology
https://github.com/workshopper/learnyoureact [Interactive workshop for React to get the basics of React] https://github.com/asbjornenge/thinking-in-react [Interactive workshop to get you thinking in React] https://app.pluralsight.com/library/courses/react-big-picture/table-of-contents [Video tutorial on thinking in React] https://app.pluralsight.com/library/courses/react-practical-start [Video tutorial on React fundamentals] https://app.pluralsight.com/library/courses/react-fundamentals-update/table-of-contents [Video tutorial on React fundamentals] https://app.pluralsight.com/library/courses/react-creating-reusable-components [Video tutorial on building react components right] https://daveceddia.com/intro-to-hooks/ [React lifecycle hooks]
Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
https://app.pluralsight.com/library/courses/react-redux-react-router-es6 [Video tutorial on redux introduction] https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html [Redux saga documentation (It is of paramount importance that you understand the ins and outs of redux sagas)]
For testing, we use the Jest framework on both the backend and frontend. We use Jest because it seamlessly integrates with both backend and frontend and is amazingly simple to use once clearly understood.
https://app.pluralsight.com/library/courses/testing-react-applications-jest [Video tutorial for using Jest with React] https://app.pluralsight.com/library/courses/react-practical-start/table-of-contents [Video tutorial for using Jest] https://jestjs.io/docs/en/getting-started [Jest documentation] https://codeburst.io/revisiting-node-js-testing-part-1-84c33bb4d711 [NodeJS testing blog post] http://www.albertgao.xyz/2017/05/24/how-to-test-expressjs-with-jest-and-supertest/ [Testing Express with Jest]