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/Redux; 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
- The Modern JavaScript Tutorial
- 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
- 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
All new code uses Redux to manage state in Calypso – making sure all components work with and react to the same data, living in a single place, instead of scattered between components’ state. Older code uses various Flux implementations or other data components.
Few, but solid Redux resources:
- The official website
- Probably the best way to learn Redux is via the Egghead Get Started with Redux video course
- When good with the basics, the Building React Applications with Idiomatic Redux video course is also super useful (though we do few things differently in Calypso, like routing)
- The Ecosystem page on the official site has a lot of links to tutorials and examples
- For more Calypso-specific details, see the Our Approach to Data document
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
- webpack – building a JavaScript bundle of all of our modules and making sure loading them works just fine
- Babel – for transpiling ES2015+ and JSX
- lodash – general purpose utility library; includes a ton of useful functions for dealing with arrays, objects, and collections; deprecated because of its lack of modularity and tendency to introduce code smells by implicitly converting different value types and handling nullish (
nullorundefined) values.
Previous: Hello, World! Next: Information Architecture