APPENDIX A: Technology tutorials

HTML and CSS

Tutorials and lessons:

Fixes for some common issues:

Common CSS Issues For Front-End Projects

JavaScript

Introductions/tutorials:

JavaScript: The Good Parts is an old classic and provides a good introduction to the language. It covers only the ES3 JavaScript specification, but it’s a good read anyway.
ES6 for beginners: This teaches you the new ES6 features.

JavaScript is typically executed in one thread only. This means that long running operations like API calls, database queries and file reads/writes should be executed asynchronously. That is, the single execution thread should not wait for an API call or database query to complete. The simplest way to achieve this is to use async/await:

You should take the single threaded model into account also when processing a large amount of data. In such case you should break the execution in smaller chunks. This way you reserve the single thread only for a small period of time at once, and you also avoid loading large amount of data to memory at once.

React

In React your UI consist of a component tree. For example:

App
  TopBar
  LeftDrawer
  Router
    Posts
      PostForm
        SubjectField
        AuthorField
        ContentField
        AddButton
      PostList
        Post 1
        Post 2
        Post 3
        Post 4
        ...
    Reports
      ...
    SearchRouter
      SearchPosts
        ...
      SearchImages
        ...

Most of these components should be presentational. That is, they know nothing about application state. They only render themselves by the properties that receive from their parent component, and they also pass along some of the properties to their children. If a presentational component contains some controls that should execute application logic (a button for example), the presentational component typically just calls a function, that it has received from its parent component as a property, when user uses that control.

Some of the components are containers. Container components know about application state, and about operations that are used to alter that state. In a simple application each container component may implement application logic and hold application state inside the component itself by using the state mechanism provided by React. In a more complex application, however, the application state and logic should reside outside the container component, and this is what libraries like Redux and redux-saga are meant for: When should I use Redux.

Tutorials:

React: Tutorial
React: Main Concepts
Egghead: React: For example, The Beginner’s Guide to React or Start Learning React

Additional libraries used in example implementation:

TODO: In the future, use React hooks instead of Redux? Or use Redux with React hooks? Provide React hooks tutorials?

Browser extensions:

Additional resources:

React Bits: TODO is this good?

GraphQL API

TODO

RESTful API

10 Best Practices for Better RESTful API

SQL and relational databases

Next: APPENDIX B: Software design

Edit this page on GitHub