SuperCell 1.0.8 update

In this video we’ll take a walk-through of the latest version of the front-end build system SuperCell version 1.0.8.  New changes include development and production modes, React, React Router, Flexbox layouts, an SVG icon component system as well as setting up an Apache server using HTML5 pushState ‘browserHistory’.

Most of these changes where brought on by the changes in React version 15.0+.  React now offers two different versions: a development mode and a production mode.  The production mode has the advantage of removing warnings as well as additional optimizations.

React Router

As a default I also added React Router.  This was a hard decision, but since almost every project I have worked on recently included react-router I decided to add it into the project.  It does add to the complexity of the overall system which I regret, however it is easy to remove all the React code, just check out the video or the instruction in the ‘Readme’ file in the Github repo.

SuperCell 1.0.8 Video Outline

If you would like to jump to a specific part of the video here is an outline including section times:

  • Installing SuperCell: 00:52
  • How SuperCell works: 02:03
  • Starting up superCell: 3:06
  • Development vs production builds: 04:09
  • Gulp file : 09:43
  • SCSS Files : 14:29
  • Flexbox layout: 16:37
  • Removing React: 18:14
  • React: 19:55
  • React Router hashHistory vs browserHistory: 20:12
  • React Router Routes: 22:27
  • Demo React Components / React Stateless Component example: 24:36
  • Icon Component System: 25:21
  • Adding a new Icon: 26:46
  • Setting up superCell with browserHistory on Apache Server: 28:32

SVG Icon Components

While not a major feature, my personal favorite feature is the new SVG icon component system.

Icon font libraries such as Font Awesome have been on a steady decline and I removed them from superCell.  I wanted to keep superCell simple and just use SVG icons.  The problem with SVG icons has always been that to really have full control over them, they needed to be inserted inline in the html.  Using ES6 modules it was easy to create an SVG icon library to centrally manage our icons while adding the benefit of establishing full control of our inline icons.  Check out the video for a full demo.

Like to leave a comment on this video?

Comments have been automatically closed on this post but don't let that stop you. Head on over to this videos YouTube page and let your voice be heard!