In this first iteration the app just fetches and displays the data from an hardcoded (public)bord id, the ‘Trello Development’ board.
The full card view is not implemented yet, clicking on a card opens a new tab with the card page displayed by Trello.
No editing is allowed on the board.
Tested on Google Chrome 44. Don’t work on IE.
Trello provides a Js wrapper for its API but at the moment I have not used it yet, to make some practice with the raw API. The trelloAPI object implements its loadBoard() method with the Fetch API.
The main ES6 features used are the Promises returned by the trelloAPI object asynchronous methods and the Arrow functions, used in some promise handlers and to bind some callbacks in React components methods.
It’s a almost a copy of original trello layout, but more visual weight is given to the card titles.
In this early phase I adopted a neutral grayscale color scheme.
The code to load and display the board background image is implemented but currently disabled to avoid visual distractions.
Temporary icons are from the Genericons package.
Flexbox was used in several places to laydown the UI layout.
SVG is used to implement the icon system, with the inline sprite techinque. No ajax loading.
The build process is under development.
Currently Browserify with the Reactify transform is used to transpile JSX and ES6 features and to concat all the modules in bundle.js
CSS is (post)processed with PostCSS and its plugins.
A custom Node.js script somewhat glues all together.
More or less, in approximate order:
- Simple homemade routing
- Loading of a board provided by the User
- Routing with React Router