Fuseday Experiments - working with Google Web Starter Kit & React.js
In Tikal, we are conducting 2 times a year something called "Fuseday" - a day where we choose some technologies to experiment with while building a small application. In this post, i'de like to share my group's focus on Google's Web Starter Kit - it's pros and cons.
The app we were supposed to develop supposed to get a stream of tweets from an api call, and present them in a nice UI in the browser. We had to integrate some graphs and charts as well as an interactive UI to play with the data. My team managed to fulfill some of the requirements during this day.
The Chosen Technologies
On the client side, we chose to experiment with new or trending libraries/frameworks. We chose the following:
- React.js - as a growing trend for performance in rendering web pages in the client - we feel that we had to test the workflow with React.js.
- Gulp.js - Gulp is trending to replace grunt.js as a node.js based task runner / automation tool.
- d3 - mvd3 - we feel that d3 is high in trends - so in order to take the high level of d3, we chose mvd3 as a subset of d3 in order to create pie and line charts.
- Google Web Starter Kit - with v2 released just 6 days ago, while in beta, we decided it can be quite refreshing to step out of the bootstrap world and experiment with a new set of css front end framework.
Google Web Starter Kit
After briefly reading the introduction page, I downloaded the zip file - which contained the following:
- 2 html templates for starting a project
- A ready to use gulpfile with configuration for running builds, server task and more
- a style guide directory - which includes a demonstration of the various ui elements included in this kit
- sass source files - for tweaking the settings of the ui elements in order to create a different "skin"
This directory includes an index.html file which outlines the various features this kit offers. There are many examples of what can be used form this kit:
- Editorial header
- Article section
- Guides section
- Page header
- Featured icons
- Featured spotlight
- Featured list
- Featured block
- Article navigation
The css classes definitions follows the nice BEM concept - while keeping the semantics of the classes easy to follow and grasp (in this short day). Overall, Google's Kit is minimal, both in style and in features - however, I can see how it can be nicely integrated with web components to create more UI element and complete reusable modules. It's built in media queries for various devices view ports and it's built in navigation and sidebar menu are awesome.
Although gulp.js was intended to be investigated, we didn't quite reach it too much. We used it mostly for local server solution rather than its build task - which was broken (on Mac). Overall, it's "watch" task and live reload worked as expected and with any code change, the browser refreshed automatically.
You can find the sources and code for the POC at github.