TUTORIAL
1. Starting a new project2. Local development3. Version control4. Project management5. Remote environments6. Environment variables and secrets7. Databases and files8. Cloud services and Terraform9. full-stack-template specific details10. Production setup11. Running in production12. Creating a custom command13. Creating a custom plugin14. Creating a custom template15. Creating a zone16. Zone maintenance17. Zone monitoring18. Zone recoveryAPPENDIX A: Technology tutorialsAPPENDIX B: Software designAPPENDIX C: Modern server infrastructureAPPENDIX D: SecurityAPPENDIX E: Data protection and privacy (GDPR)

APPENDIX A: Technology tutorials

HTML and CSS

Tutorials and lessons:

Fixes for some common issues:

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:

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:

RESTful API

GraphQL API

TODO

SQL and relational databases


Next: APPENDIX B: Software design

1. Starting a new project
2. Local development
3. Version control
4. Project management
5. Remote environments
6. Environment variables and secrets
7. Databases and files
8. Cloud services and Terraform
9. full-stack-template specific details
10. Production setup
11. Running in production
12. Creating a custom command
13. Creating a custom plugin
14. Creating a custom template
15. Creating a zone
16. Zone maintenance
17. Zone monitoring
18. Zone recovery
APPENDIX A: Technology tutorials
APPENDIX B: Software design
APPENDIX C: Modern server infrastructure
APPENDIX D: Security
APPENDIX E: Data protection and privacy (GDPR)
Home
Docs
Tutorial
Plugins
Templates
Extensions