Table of Contents
- Git and GitHub
- Algorithms and data structures
- Databases, Schemes, Models, and ORM
- HTML and CSS
- jQuery and DOM manipulations
- Chrome instruments for developers
- Test-Diven Development
- Web Sockets
- EcmaScript 6 (ES2015)
- React and Redux
- Authentication, Sessions, Cookies
- Web Security
We have to mention that language being pretty open – many companies are rivaling using JS with the goal of its evolution. The language is incredibly flexible, so it is perfect for people who like both object-oriented and functional approaches. A mammoth amount of different libraries and frameworks allows you to solve even the most difficult issues. Moreover, the server platform Node.js allows you to use JS not just in browsers but on the console. You can create apps for both smartphones and PC. Apps for a computer by using the Electron framework, and mobile apps thanks to NativeScript or ReactNative.
Git and GitHub
The first thing you should do is to study how Git works: a source code manager is a vital instrument for developers, so you have to learn it first – since it’s arguably the best choice nowadays.
Here are three common topics you might start to learn to quickly understand the basics:
- Creation and moving of the files across catalogs.
- Initialization and commits in Git.
- Repositories settings in GitHub.
Also, you must have the next skills:
- Object-oriented JS – constructors and factories.
- Functional JS – functions of the highest order, circuit, and recursion.
- Specification of the Jasmine tests.
- Basics of the HTML, CSS, and jQuery.
Algorithms and data structures
Later you have to learn algorithms (especially big complicated ones), and basic data structures: connected lists, turns, stacks, binary searching trees, and hash-tables.
- Node.js – Approximately a decade ago JS was used only for writing the code for front-end (just like CSS and HTML), but today due to Node.js the situation is quite the opposite. Node – is a server area for committing all the actions by JS, so you won’t have to learn all the new syntax. Although, you will have to import and export files, divide the entire code for modules, and use the pack-manager NPM.
- Express.js – Besides learning Node you have to get more knowledge about back-end development, especially about servers and routing. Ports and protocols with HTTP will be a nice start before studying Express. Express.js – Node-library for requests processing.
If you don’t want to refresh your page after each change in your DB, Ajax is certainly what you will need – it sends asynchronous HTTP-request to reload only part of the page. You can work with Ajax through the jQuery (see below) or by directly (manually) handling the XMLHttpRequest object.
Asynchrony is the thing that makes JS unique but separating developers into two sides: some love it and some hate. Each developer has to know both advantages and disadvantages of that technology. You can start by studying call stacks, events cycles, and callbacks, then – studying promises.
Databases, Schemes, Models, and ORM
Databases one of the most important parts of web development. If your app has to save or load some information without losing it just after the page’s update, you definitely will have to use DB. You have to learn how to see the difference between relational and non-relational DB and learn their connection ways. The next step will be studying the SQL and different systems for controlling DB. Knowledge of ORM won’t be excessive.
HTML and CSS
Those languages are the very basics of the web-design. You don’t have to know them perfectly but understand their code. Then you will have to learn at least one popular library (for example, Bootstrap). For CSS you have to learn processors, like Sass that will make CSS more similar to the normal code. For making work with the HTML you can pick any template, like PUG.
jQuery and DOM manipulations
After you finished the main look of the page using HTML and CSS, you will use event translators and jQuery for the DOM controlling. Many people think that jQuery is useless and soon will be replaced by Angular or React. Maybe it’s true, but jQuery is worldwide popular, so in any case, you must know it. Moreover, you can get into the situation when you will have to do an incredibly complicated job using React-microscope, so in that situation, light jQuery will be your salvation.
To better understand these topics, be sure to check out our posts, guides and tutorials regarding JQuery.
Chrome instruments for developers
If we didn’t mention the Chrome instrument which makes the programming job easier, we wouldn’t forgive ourselves. Thanks to them you will be able to learn DOM, debugging process through the console, routes` tracking and so much more.
Also called TDD: this is the development tactic when the software divides for a few tiny cycles:
- Writing down the code to make all changes you had to.
- Writing down the code that will pass all tests.
- Refactoring the code and writing new tests if those are necessary.
- If some parts of the code don’t pass the test, they have to be rewritten.
If you work with JS we firmly recommend you pay attention to the Jasmine, Chai, and Mocha frameworks.
To better understand these topics, be sure to check out the ASP.NET Core 3 and Angular 9 book, which features an entire chapter about client-side TDD using the Karma test runner and Jasmine testing suite.
We have to pay extra attention to that topic because web-sockets are useful. WebSocket protocol, unlike the HTTP one, will allow you to work with a bidirectional data stream – the reason why is that tech unique. The most popular library called socket.io and is well documented here.
EcmaScript 6 (ES2015)
Nowadays, the main standard is ES6 (ES2015), ES2016 has been confirmed already and the ES2017 is under development right now, so you always have to watch their updates and use the newest and most stable version. All compatibility problems can be solved easily with the next apps.
Babel – compiles ES6 (ES2016 support is expected soon) into the ES5, which is well-known by all browsers. It also can compile JSX/REACT-components, which makes it vital for web-developers.
Webpack – takes all your files (images, fonts, style tables, JS-files, etc) into the single dependency graph. You don’t have to use it if you are making a small app but shall use it while working with React.
React and Redux
React (also known as ReactJS) – the library which will allow you to create a user’s interface. It was created by Facebook in 2013 and became worldwide popular pretty fast. React is needed not just for web-design, but there are versions for smartphones (React Native) and VR (React VR), published later by the same company.
Redux – container of predictable states, usually used with React. It can be used for shortening the code by the modeling way. Pretty useful in real-time working apps with a big number of users, such as games.
To better understand these topics, be sure to check out the series of React & ReactJS articles we’ve published in the last few years.
Authentication, Sessions, Cookies
You have to understand how the app will interact with users – how users will log in\out of their accounts, get bonuses, etc. For identifying people during surfing your site, web-sites using cookies – small text-files that send a reply from server to browser for user’s HTTP request. For the connection between DB and log-in page, you can use the express-session library.
Each site/app, of course, must be secure and reliable. You have to get the knowledge of all possible attacks on your creation and ways of protection as well.
To better understand these topics, be sure to check out the various IT & Development Security articles we published in the last few years.