v0.3: Architecture

Demo

In this development iteration I finished the journey started in the previous version in search of an app structure.
How mentioned in the precedent post, I first tried the Flux architectural pattern proposed by Facebook. I enjoyed it but I found it a bit overkill at this development stage. The funny thing is that at the end of this journey I returned to the starting point, that is the React Router.

However along the way some new features were added.

Now the app has three pages, the home, the about and the board pages. They are all rendered on the client, the server just serves the initial html file.

The home page now shows only a (Flexbox)grid of some public Trello boards, grouped by category.
The grid items have an entrance animation implemented with delayed CSS Animations.
Keyboard navigation(arrows, tabs, enter…) is supported.

trello react

Selecting a board item switch the app to the board page view.

pub-board-calculus

Finally, on the about page I moved the informations previously displayed in the Welcome section of the home page.

about

Note that now, thanks to React Router, the browser history buttons works as expected, and the app urls can be bookmarked. If an not existent url is provided a basic not-found-page is rendered instead. Urls have a nice(not hash symbol) format because they are handled with React Router History.Location.

board-not-found

notfoundpage

The app is developed on Chrome and some basic testing has beeen done on latest Firefox.

Implementation notes

Now the app features a basic backend, with a simple Express.js server hosted on OpenShift, that for now just serves the SPA index.html file for all non-static assets urls(images,css,js).

I’ve switched back to Sass from PostCSS. The only PostCSS plugin used in the build script is AutoPrefixer.

Talking about responsive web design, the app target devices are laptops and desktops mainly, but some media queries here and there adapt the layout at smaller viewport sizes.

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