An Atom Snippet to Create A React Component

with Browserify:

Advertisements

v0.5: Card Comments Pagination

rt-0.5-sshot-00

rt-0.5-sshot-01

rt-0.5-sshot-02

rt-0.5-sshot-03

rt-0.5-sshot-04

  • Demo (If the app is loading slowly just make a refresh because it could be in the idle state on Openshift)
  • Source code on GitHub

As can be watched in the above screen shots, pagination of the card comments was the focus of this iteration.

After the last comment(if the card has no comments the comments section is not displayed), if there are others comments to read, a ‘more’ button is displayed. When the user clicks on this button, it displays an activity indicator and when the next page data is loaded the new comments are appended to the ones already on page.
In the comments bar there are displayed the number of shown comments and the total of them.

Implementation Notes

The first page of comments comes down with the other card data. Successive pages are fetched when the more button is clicked via Trello API calls wrapped in a ‘promisified’ page iteration object(it has a .next() method but it is not an ES6 iterator object) provided by the data module.

This iterator is created in the Comments component getInitialState() method:

this.pageIterator = data.cardCommentPageIterator(this.props.cardId, this.props.pageSize, 2);

and it is then used to fetch successive pages:

this.pageIterator.next()
         .then(
            page => {
               this.setState({
                  items: this.state.items.concat(page),
                  loading: false
               });
            },
            (reason) => {
               console.log('cannot load comment page', reason);
               //throw reason
            }
         )
      ;

v0.4: Card Page

tr-0.4.01

  • Demo (If the app is loading slowly just make a refresh because it could be in the idle state on Openshift)
  • Source code on GitHub

In this iteration it is possible to inspect the details of a card.

Differently from the original Trello design that uses a popup modal to display the card data, I opted for a separate and dedicated fullscreen page, with a design inspired to the Dribbble shot template page.

tr-0.4-00

This is just a first basic version, so some features are missing and the CSS styling is uncomplete.

The layout is organized on two columns, with the main content and the comments on the left and some card auxiliar info and actions in the right column.

I chose to put the card cover image, if any, just under the card title and meta. After this image, it comes the card description and the comments section

In the right column/sidebar there are the number of card votes, the number of attachments and two links to get back to the parent board and to see the original Trello card.

The layout is not responsive yet.

The only card activities retrieved with the Trello API are the comments, and only the first 50 items are showed.
Pagination is coming in 0.4.1.

And other card page upcoming features in 0.4.x will be timeago, attachmnts data, voters, …

Development Notes

At the moment, returning back to the parent board makes the app spawns a new http request to Trello to fetch again the board data. This will be fixed later.

The card description and the comment text can be formatted by the user with Markdown, so the Comment React component, in its .render() method, convert it to a HTML string with Marked and inject it into the DOM with dangerouslySetInnerHTML. Later this could be done with Marked-React.

tr-0.4-02

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.

v0.2: In search of an architecture

sshot-02

Now there is a welcome screen/page where it is possible to load some public boards.

But the main aim of this iteration was to introduce some application architecture on top of the React components.

In particular I made some experiments with app states and routing, using some great libraries like React Router, Router.js and Page.js. So now the url showed in the browser location bar is different form the one showed in a board page, with support of the browser history navigation buttons.

However, this will change in 0.3, where I’m trying the Flux architecture.

sshot-01

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

iNove WordPress theme customizations

I am doing some customization of the iNove WordPress theme(the one used here is the original iNove). You can find it on my GitHub account. Have a look at the Wiki there for some explanations. Please keep in mind that it is work in progress. I have not setup a live demo yet so you have to download and install it to try it.

Patching CDN hosted jQuery

Today I encountered my first bug in the latest release of  jQuery, the 1.5 version.

After upgrading to this version, the drag and drop functionality (implemented with the jQuery UI Draggable interaction component)  of a project I am working on started to exhibit strange behaviors.  After some bug hunting I found that the problem was caused by this bug.

The fix is already on GitHub and will be released with the 1.5.1 milestone.

Meanwhile, because I am using the library file hosted on the CDNs, I patched it overriding the offending function like this:

<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
   jQuery.fn.clone = function( dataAndEvents, deepDataAndEvents ) {
      dataAndEvents = dataAndEvents == null ? false : dataAndEvents;
      deepDataAndEvents = deepDataAndEvents == null ? dataAndEvents : deepDataAndEvents;

      return this.map( function () {
         return jQuery.clone( this, dataAndEvents, deepDataAndEvents );
      });
  };
</script>