React Trello 0.1: Hello World!

Demo

sshot-00

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.

Implementation Notes

JavaScript

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.

Design

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.

CSS

Flexbox was used in several places to laydown the UI layout.

SVG

SVG is used to implement the icon system, with the inline sprite techinque. No ajax loading.

Build

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.

What’s Next

More or less, in approximate order:

  • Simple homemade routing
  • Loading of a board provided by the User
  • Routing with React Router
Advertisements

Published by

mgiulio

Front End Developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s