Front End
We will be using the Github issue trackers through Waffle.io, which serves as a UI to track tickets.
React JS provides a declarative API for building dynamic html views. We intend to utilize React to its full potential as the main View library of our stack.
As part of the platform team, Andreas Daiminger and Ryan Collins are providing much of the tooling and boilerplate required to get started with using React best practices. This includes: a starter project, a build process, style guides and even scaffolding / code generation. More information on these tools will be provided in this wiki.
React includes fantastic Developer Tools, the usage of which is highly encouraged.
- Official Documentation
- ReactJS Fundamentals A superb course that goes over the basics of React. Please be aware, however, that this course uses ES5 and we are intending to use ES2015 / ES6.
- SurviveJS Learn React, Webpack and the ecosystem
More resources
- React for Beginners Wes Bos is Boss
- Learn Redux
- Advanced React, Redux and ES6
- Egghead Redux
Redux provides a simple API to incorporate a stateless unidirectional data flow architecture.
Redux includes fantastic Developer Tools, which can be used to monitor your application state and even travel through time! There are plenty of use-cases for the developer tools and their usage is highly encouraged.
We recommend that our projects adopt stable features of the ECMAScript specification as they are released to the public. We will use Babel until all of the desired features are included in the majority of web browsers.
An example of the Babel presets we have used is as follows
"babel": {
"presets": [
"es2015",
"react",
"stage-0"
]
}
If you need to, please take a look at the following resources regarding ES6.
- ES6 Features
- ES6 in 350 Bullet Points
- ES6 And Beyond from the YDKJS Series by Kyle Simpson.
- ES6 for Everyone Although a paid course, the ES6 for everyone series is very in depth.
The Front End platforms team has setup an awesome boilerplate for this project. Documentation for the boilerplate is available here. Please see the generators section below and in the boilerplate's documentation page for details about code generation and scaffolding.
We are using Webpack, babel and a whole fleet of Front End tools that make the development process a breeze. All of the tooling is included with the repository. As mentioned elsewhere, to get the most out of the tools, you should make sure that you install the ESLint Plugin for your text editor and also install the React Devtools and also the Redux Devtools packages in your web browser.
Thanks to Andreas Daiminger, we have some brilliant React / Redux code generation tools. Please see the generator documentation. If you find that you don't use the generators, please ensure that you follow the file structure for components so that our project remains modular and follows the best practices set forward by the platforms team.
If you need a reference for the file structure, please refer to the original boilerplate project: Components and Containers.
We are encouraging TDD with this project and will be using a multitude of testing tools to enable full test coverage for our apps. Our boilerplate / starter project has all of this enabled and configured by default, but a solid understanding of the technology is encouraged
- Expect Assertion Library that lets you write better assertions
- Enzyme Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.
- Karma Test runner - The main goal for Karma is to bring a productive testing environment to developers.
- Mocha is a feature-rich JavaScript test framework running on Node and in Browser
Individual developers will be expected to only submit code when it has past all tests. On top of that, developers will work with their team to come up with a strategy for writing tests before implementing features throughout the development of the project. Please talk with your team leader if you are unclear on how you should approach testing.
We will be adding pre-commit hooks to ensure that all tests pass and that all code is sufficiently linted prior to submission to the master branches in the repositories.
TDD Resources
We use the ESLint AirBnb Configuration as a starting point for our project's style guide and best practices. With the proper tooling setup, there is absolutely no need to memorize all of the rules. Instead, you can use the power of static analysis to alert you via the command line and the editor integrations when you have violated the style guide / best practices.
We follow the AirBnb JavaScript and React / JSX Style Guides. We strongly encourage that every Front End Contributor reads these guides and also encourage an open dialog regarding style amongst the entire community.
The built in tooling with ESLint and the Git pre-commit hooks will enforce these best practices and style guides. If any of the rules enforced by the style guide are confusing or unclear, please consult with one of your team leaders.