Understanding the technologies and abstractions on which Calypso is built can make for a much better learning and building experience. Even if you are a student of the “learning by doing” school, we would still encourage you spend some time with the resources in this document.
Calypso is using neither Angular nor Ember; because we are building Calypso for the long haul, updating and improving a home-grown framework is a better long-term approach for us. Currently, we're using React and Flux; they're great, but knowing we have the control to use better technologies as they come along makes us feel more confident in our future. Calypso isn't a small startup project; we know it will need to scale and our technology will need to scale with it.
Instead of a named framework, we decided to assemble our own out of small, focused JavaScript modules.
In the recent years, JavaScript went a long way from the language hidden behind jQuery selectors to the engine behind huge single-page applications and fast node.js async server-side daemons. ES6 is a confirmation the language is going in the right direction.
Here are few resources to get up to speed with “modern” JavaScript and ES6:
- JavaScript Allongé, the "Six" Edition
- Exploring ES6
- What the heck is the event loop anyway? – short presentation that sheds some light on how asynchronous operations are executed in JavaScript
Key concepts checklist:
- Module pattern with CommonJS and npm
- Scope, context, and function binding
- Basic prototypes – creating new objects, inheritance
- Higher-level functions –
map,filter,reduce - Async primitives – callbacks, promises
Do you know any good videos and presentations on the subject? If yes, please send a pull request to add them here.
React is a library by Facebook that implements a virtual DOM. Instead of carefully changing the DOM, we can just re-render whole components when the data changes. React radically simplified our code and allowed for an awesome composition of reusable components.
Here are some great React resources:
- Official documentation
- React.js Introduction For People Who Know Just Enough jQuery To Get By
- Tutorial at Scotch.io
- ReactJS For Stupid People
- Thinking in React
- Official Tutorial
- Presentation: Rethinking Best Practices
- Presentation: Be Predictable, Not Correct
- Presentation: Why does React Scale?
Key concepts checklist:
- What is mounting of components?
- When are components rendered?
- What happens on render?
- Differences between props and state
- Component lifecycle methods
- Mixins
- Why shouldn’t we touch the DOM the old way
Calypso is developed on Github, and we use Git extensively. Git is extremely powerful, and understanding how it works and controlling it are an important part of our daily workflow.
Essential Git resources:
- The Pro Git book is online and free. It's a great resource, both for beginners and for intermediate users (few dare to call themselves advanced).
- git ready – byte-sized tips
- Several shorter articles with tips:
- Some operations are easier using a GUI. GitX is a simple one for OS X. Fugitive is a must for
vim. The GitHub app doesn’t entirely fit our workflow, but you can use it for pulling and committing. One caveat is that you will have to do all rebasing manually.
Key concepts checklist:
- How is Git different from Subversion?
- How does branching work? Why are branches cheap?
- What is rebasing? How is it different from merging?
- What happens when we run
git pull? - What’s a remote? What happens when we push to it?
- Which parts of the repository are kept locally and which remotely?
- What’s the staging area? Why is this extra step useful?
- What is squashing? How can we edit and reorder commits before pushing/merging?
The way we use Git with Calypso is described in the Git Workflow document.
- page.js – router
- express.js – light server-side framework we use to serve the initial page
- lodash – general purpose utility library; includes a ton of useful functions for dealing with arrays, objects, and collections
- webpack – building a JavaScript bundle of all of our modules and making sure loading them works just fine
- make – our build tool of choice
Previous: Hello, World! Next: Contributing to Calypso