Currently this repo is focused on learning and using JavaScript. Below follows a curriculum to learn the language, based on freely available online resources. The main ones are:
-
Eloquent JavaScript: A crowdfunded book about JavaScript and programming, which is free to share with attribution.
-
Codecademy: A site where you can "Learn to code interactively, for free." They also offer additional paid resources. Signup is required.
-
freeCodeCamp: Another site where you can "Learn to code for free." They also have open-source projects for nonprofits. Signup is required.
If you want to see "the docs" of JavaScript, Mozilla's MDN is the recommended resource. For example, here is how to use the Array filter() method. If you have previously worked with Java, you might be interested in this introduction of differences between JavaScript and Java from MDN.
Later, we intend to extend this with problem-based learning (PBL) tasks, where the developer will gradually learn about the fundamental technologies used in DINA-Collections, through building (and continuously refactoring) a todo-list application.
Before diving into learning, here are some links that may be useful when you want to configure your editor.
If you want to try a new theme, @fredrikolovsson recommends Oceanic Next.
For Codecademy, we will use the "Introduction to JavaScript" class and for freeCodeCamp we will cherry-pick exercises that you can find by clicking on "Map" in the nav bar.
| Resource | Read/do |
|---|---|
| Eloquent JavaScript | Chapters 1 & 2: Values, Types, and Operators Program Structure |
| Codecademy | Lessons "Introduction" and "Control Flow" |
| freecodeCamp | Section "Basic Javascript", exercises "Comment your JavaScript Code" to "Word Blanks" |
| Resource | Read/do |
|---|---|
| Eloquent JavaScript | Chapter 3: Functions |
| Codecademy | Lessons "Functions" and "Scope" |
| freecodeCamp | Section "Basic Javascript", exercises "Write Reusable JavaScript with Functions" to "Counting Cards" and exercises starting with "Generate Random" |
| Resource | Read/do |
|---|---|
| Eloquent JavaScript | Chapters 4 & 5: Data Structures: Objects and Arrays Higher-order Functions |
| Codecademy | Lessons "Arrays", "Loops", "Iterators", and "Objects" |
| freecodeCamp | Section "Basic Javascript", exercises "Store Multiple Values in one Variable using JavaScript Arrays" to "Shopping List" and "Build JavaScript Objects" to "Profile Lookup" |
| Resource | Read/do |
|---|---|
| Eloquent JavaScript | Chapters 6 & 7: The Secret Life of Objects Project: A Robot |
| Codecademy | Lesson "Classes" |
| freecodeCamp | Section "Object Oriented and Functional Programming", all exercises |
| Resource | Read/do |
|---|---|
| Eloquent JavaScript | Chapters 8 & 9: Bugs and Errors Regular Expressions |
| freecodeCamp | Section "Basic Javascript", exercises "Sift through Text with Regular Expressions" to "Invert Regular Expression Matches with JavaScript" |
| Resource | Read/do |
|---|---|
| Eloquent JavaScript | Chapter 10: Modules |
| Codecademy | Lesson "Modules" |
| Resource | Read/do |
|---|---|
| Eloquent JavaScript | Chapter 11: Asynchronous Programming |
| Udacity | Interactive video course on Promises |
| Google Developers | Written primer on Promises |
| MDN | Event loop |
| Resource | Read/do |
|---|---|
| Eloquent JavaScript | Chapters 18 & 20: HTTP and Forms Node.js |
The other remaining chapters in Eloquent JavaScript are optional reading and mostly not directly relevant for the DINA-Collections project.
Learning resources and task specifications are yet to be determined. However, here is an initial idea of tasks:
- Node & Express: Write a Todo API with mock database
- React & JSX: Build a bare-bones UI
- Sequelize: Refactor API to use a real database
- Redux: Centralize frontend state management
- Semantic UI: Rebuild the UI with Semantic components
The purpose is for the new developer to get familiar with the main technologies used in DINA-Collections by working with them.
Node is used to run the server and at this point that is all you need to know about Node.
We recommend using nvm to install and manage Node versions:
- Install nvm
- Install Node.js version 8.9.1
nvm install 8.9.1
- Set Node v8.9.1 as default
nvm alias default v8.9.1
8.9.1 was the long-term stable (LTS) release of Node at the time when development of DINA-Collections started. With nvm it is easy to change which version you run.
What is Express? This is what they say:
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy. Express provides a thin layer of fundamental web application features, without obscuring Node.js features that you know and love.
Express has great API reference, Getting started and Guide sections. Below is how we suggest to combine reading with coding.
For a convenient development experience, we suggest using the free Postman desktop application to make requests to your server on localhost. In the Postman app you can save requests in a collection, so that you can quickly make all the requests you want during development.
To learn about Express routes, you can look at Codecademy and/or the official Express guide.
Do the Express routes lesson on Codecademy.
Go through the following sections of "Getting started" (hover over the header in the menu to see links to the sections) in this order:
- Hello world: Play around with this, you can change the code in the browser and try it through the URL they provide.
- Basic routing: Learn the basics of routing with Express. Read more in the Routing guide and the API reference as needed.
First copy this folder from the repo and use it as starting point. Look in package.json to see the available scripts (and you can refer to this README, if you want to know more about ESLint and Prettier. Also refer to the editor setup section as needed.
Then build an app that has those endpoints for CRUD (create, read, update, delete) of todos:
/todos: GET, POST (create new todo, read all todos)/todos/:id: GET, PATCH, PUT, DEL (get todo, patch todo, update todo, delete todo)
To start with, you can use a plain JavaScript object, declared in the global scope of your server code, as your "database". If you want debugging support, you can look into the built-in logging that Express has.
Do the Express middleware lesson on Codecademy.
- Follow the Writing middleware guide and .
- Learn more about middlewares by reading the Using middleware guide.
- Read about error handling in Express.
Implement request logging, request time and error handling middlewares on your Todo server (as described in the official guide step 1 and 3 above).
If you want to load your API with initial data and also be able to save the data at some point (e.g. you can add a middleware that writes the date after each request, or when making a POST request to a specific endpoint), you can read this guide to using Node's fs module for reading and writing files. You will want to use readFileSync to synchronously load the data before the server starts to listen and probably want to use the asynchronous writeFile to write to the file without blocking further operations.
This task is centered around React and will let you build your first UI and connect it to the API built in the previous task.
A JavaScript library for building user interfaces
As seen by the tagline, React has now become so big they chose to simply state a fact instead of promoting the features, but you can check out the official website if you want to read more. Thinking in React is a nice article that explains what it means to work with (and think in) React.
JSX is introduced in the first Codecademy lesson, but you can also read about it in the React docs.
Do the Learn ReactJS: Part I and Learn ReactJS: Part II lessons on Codecademy.
Do the tutorial that guides you through building a tic-tac-toe game.
Egghead has two video courses for beginners (in alphabetical order):
You can watch all of the lessons or look at the lesson titles and cherry-pick what you want/need.
We follow most of Airbnb's style guide for JavaScript, which also covers React and JSX. This also includes configuration for ESLint so you will get lint errors or warnings if your code does not adhere to the style guide. Please use the ESLint config file from the DINA-Collections repo and install the devDependencies related to eslint.
If you did the React tutorial you already installed Create React App, now use it to create a new app for this task. (Note: The Todo API that you built in the previous task and the React app cannot run on the same localhost port. The easiest might be to change the port in the Todo API, e.g. to 4444.)
The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.
Read about using fetch to make HTTP requests. You will need this to communicate with your Todo API.
Build a UI that lets the user:
- Create todos
- View a list of all todos (optionally with some categories, e.g. "all", "finished" and "unfinished")
- Mark a todo as finished
- Edit the text of a todo item
- Remove a todo
This should use the API you built in the previous PBL task.
This task requires you to install postgres and learn Sequelize so you can wire up your Todo API to a database and persist the data.
You are free to install postgres the way you want. An easy way is to use the DINA-Collections repo:
Clone DINA-Collections and run:
make setup-env
docker-compose -f docker-compose.dev.yaml up -d postgres
This will start postgres in a container with default port (5432) exposed with settings (user and password) as specified in ./env/.postgres. This file will be created by running the setup-env command and you should be fine with the default settings.
Sequelize is a promise-based ORM for Node.js v4 and up. It supports the dialects PostgreSQL, MySQL, SQLite and MSSQL and features solid transaction support, relations, read replication and more.
We use the ORM Sequelize for accessing postgres. Go to the Getting started section and go through that.
You can also read this article, with related source code, about making a todo app with Sequelize and Express.
Then refer to the docs as necessary to complete the task.
- Add a User model that can have many todos.
- Add a Todo model that belongs to a User.
- Rewrite the Todo API so it persists todos in the database.
- Load some initial data (users and todos) in the database.
- Adapt the UI so it can show all users and all tasks and also filter tasks by user.
Redux is a predictable state container for JavaScript apps.
This task is about learning how to work with Redux, which is a library we use to manage the centralized state in the frontend. React has built-in support for local state in components, but sometimes we want to have a central state that is accessible across components and that is what we use Redux for. Redux also has nice devtools that improves the developer and debugging experience.
Before diving into learning the nitty-gritty, first read about the motivation, core concepts and three principles of Redux in the official Introduction. And then, to balance the excitement, read the article You Might Not Need Redux, written by the creator of Redux after people started using it without first considering if they really need it.
The Learn Redux section in the docs has a list of great resources. We recommend reading and watching at least those two:
- Official basic walkthrough
- Getting started with Redux free video series by the creator of Redux
Then check out any other resources you want or move on to the next part.
Advanced usage includes handling asynchronous actions (e.g. to make API calls) and middleware, to handle side-effects of actions (e.g. logging actions or saving to localStorage).
- Offical advanced walkthrough
- Building React Applications with Idiomatic Redux free video series by the creator of Redux
- Building Applications with React and Redux in ES6 paid video series going through setup of environment, intro to React and Redux, connecting React & Redux, doing asynchronous things in Redux, testing and preparing for production
- Flux Standard Action, which is a convention we follow for the action objects.
- Reselect, a library for memoization of expensive state selectors.
You can also check out more of the resources listed in the docs.
Before jumping into development, you might want to look at those:
Adding redux-logger is a nice start.
In DINA-Collections we use the library redux-form to make it easier to get advanced form features (e.g. validation, error messages and managing form states).
- Watch this video series: manage-react-form-state-with-redux-form
Since forms are a core part of DINA, it is great to learn more about that library.
- Rewrite your Todo application to use Redux to manage CRUD of todos. This includes adding actions, reducers, selectors, a thunk middleware (e.g.
redux-thunk), perhapsredux-logger, and connecting your components to the state withreact-redux. - Add filtering of todos, e.g. based on their status of being done or not done and/or which user they belong to.
- Add simple search, e.g. have an input where the user can type and filter todos based on simple string matching of the todo title.
- Add a view where you show all the information about one specific todo. Then verify that when you go between the list view and the view of a specific todo, that any filtering and search inputs stay the same.
- Rewrite all forms with
redux-formand add buttons for Save, Reset and Cancel, where relevant, using the form state props provided byredux-form. Also add some simple client-side validation, e.g. making a field required and showing an error if user tries to submit without it.
Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Semantic UI React is the official React integration for Semantic UI.
Semantic UI React offers a set of UI components that makes it quick and easy to build a UI with a decent look without writing any CSS. For more advanced usage, it also enables to customise the theme (e.g. color variables) and to make as detailed styling overrides as necessary to achieve what you want.
Read here how to install it in your project: https://react.semantic-ui.com/usage
Then browse through the available components in the documentation.
Rewrite your Todo app UI with Semantic UI components. At least use and configure (with props) the Grid, Header, Dropdown, Input, List and Button components.