Modal Title

The Grid: Decoupling HTML from the Data, Similar to Cocoa Autolayouts for iOS and OS X

Oct 29th, 2014 9:30am by
Featued image for: The Grid: Decoupling HTML from the Data, Similar to Cocoa Autolayouts for iOS and OS X

The Grid has built an artificial intelligence engine to auto-design websites that decouples static HTML development from the layout of a site. The result is a technique similar to how Apple uses Cocoa Autolayout for iOS and OS X and an alternative to the brute force of CSS.

Founded by developers and designers from Google AdSense, Medium and Create.js, The Grid combines open source project components with a commercial service that helps web site owners resolve the issues they face when introducing dynamic capabilities into static web sites.

The sequence of events starts when a business creates their website, said Co-Founder Brian Axe, who came from Google AdSense. Then when they have new content, they add it to a Facebook business page, LinkedIn or to another social media account. Over time, the social media site becomes more dynamic and current, while the site stagnates. End customers are lost in the mix and drift further from the business’ hub site and communication flow. On top of this, the proliferation of devices means that multiple site visitors each have a different — potentially jarring — user experience when trying to view the website on their mobile or tablet.

The Grid aims to bridge this disconnect by providing a platform that decouples the underlying information infrastructure from the front end design. The architecture becomes the foundation that is static but co-exists with a data model on top that manages the design and user interface. The result is a responsive site that uses an alternative to CSS called Grid Style Sheets.

Phase One: Grid Style Sheets Shared via Open Source

Grid Style Sheets uses a CSS preprocessor and JavaScript runtime to allow developers to harness Cassowary.js to polyfill web content based on the end user’s screen size. This allows developers to identify the positioning of elements in relation to each other, a technique similar to how Apple uses Cocoa Autolayout for iOS and OS X.

GSS – Layouts Not Possible with Tomorrow’s CSS // O’Reilly Fluent 2014 from Dan Tocchini on Vimeo.

Co-Founder Dan Tocchini was working on a previous project that needed a way to alter website content and layout without disturbing the HTML underneath.

“But to do that, there are literally articles 20 pages long on how to center something. That’s pathetic tooling. So I stumbled across a research paper on Cassowary and it happened to be created by Greg Badros, who worked with Brian at Google. This was the engine I needed underneath all of the stuff I was doing. It allows you to do things that are just not possible with a brute force layout like CSS.”

GSS basically takes CSS layout and throws it all away and rebuilds it with a new paradigm constraint.

By offering GSS as an open source tool, the team has built a developer community that will also be interested in The Grid’s end product. “GSS is something that needs to be open source and, more importantly, as it is adopted and refined, it just makes sense.” Another advantage of creating GSS in the open is that other developers can help solve remaining hurdles, such as speeding up GSS layout on mobile displays. GSS is JavaScript, so CSS is much faster. When you are working on mobile, the less JavaScript the better, so making it open source means developers are contributing to it.

Grid Style Sheets are the first layer of the stack used internally to create The Grid product. While the bulk of GSS is open source, The Grid team are already adding internal components that reflect the business value proposition that The Grid is wanting to offer: “Everything you see on The Grid website is designed with GSS. There are several thousand variables being solved: we recompute a solution for every screen-size. So we have a tool that is resizing content for a browser that is as fast as normal CSS, because it is cached through the engine. That’s part of The Grid platform right now but it is not open source.”

To date, just over 1,800 developers have starred (followed) the Grid Style Sheets repo in GitHub. Visits to the Grid Style Sheets website before summer grew to around 370,000 views in July, according to data from SimilarWeb.

Phase Two: NoFlo and Flowhub as a Kickstarter Project

With a GSS layer in place that provides new flexibility with laying out webpages, the next stack layer needed was a processing tool that could match the content to the layout template and carry out all the computations. This was the tool that needs to check if there are faces in the images so that cropping or resizing keeps the person at the center of the image, or can identify levels of contrast in an image so that text placement can be easily read over whatever the background.

To do this computational work, the team created a Kickstarter campaign to fund Flowhub, a visual interface built to allow developers to code in NoFlo, a flow-based programming implementation of JavaScript.

“NoFlo was started by Henri, our CTO,” says Tochhini. “I hadn’t had the best experiences with backend developers in the past: some developers were hiding behind the complexity, I got fed up with not having any visibility. Meanwhile, I also saw that the cutting edge websites designed for games, graphics, crazy artificial intelligence, movie special effects, they were all used flow-based programming, they are all nodal interfaces, so why the hell aren’t we doing this? The only software developer I could find doing this was Henri. So what we did was put up a Kickstarter for Flowhub, that was not about money, it was about exposure.

“GSS is the code at the frontend, so I don’t really touch the backend, but I know what it takes to create that, so you can use open source libraries to make that happen. For example, face recognition, so you can see this graph represents facial recognition and another recognizes the faces of cats. We have a general feature detection, and we have another little node that identifies contrast so it can identify where to put text.

“So our entire backend goes thru Flowhub so each node represents another graph of another environment. It’s a very crazy background.

“We have always seen Flowhub as a practice for The Grid. GSS and Flowhub are like two mini-startups, and that was a really helpful approach to take. Flowhub’s now getting quite a bit of traction in its own right: we have some enterprise interest from Siemens, and Intel are using it for some secret project they are working on.”

To date, NoFlo has 1,433 followers in their GitHub repository while SimilarWeb estimates that monthly visits to the Flowhub website averages around 35,000 visitors.

Phase Three: The Grid Independently Crowdsources Subscribers, Reaches Viability Targets

With a growing developer community already playing with their tools, The Grid team are now putting the stack together and preparing to offer it as a final product, both for end customers who want to build their own websites using the platform, and web developers who want to access The Grid APIs to draw on the platform’s capabilities in their own way. To do so, they have launched their own crowdfunding campaign, offering subscriptions direct from their website.

Tocchini explains the stack:
“We use S3 and Heroku, and primarily Node.js, a little bit of C for image processing, and there is a little bit of Java for extracting data out of word documents. So it is a very poly-language environment. We do a lot of the hosting: our site building process is very much built on Jekyll. Our GitHub repo is basically Markdown.”

Tocchini sees The Grid as working in two ways for developers:

“We have a whole API around using a custom layout filter, so they can use that to build their website. We have a whole UI so as a developer you push content there, and once your GitHub repo (where you store your content) changes, the API hooks analyze everything, look for faces, look at context, we have hardcore analysis on everything (number of words, everything), we do all that crazy stuff and then we have a solve that takes your repo content and adds your layout. Then when it is hosted on The Grid, we can A/B test each component. There’s a lot of benefit from staying in The Grid.”

The alternative is for developers to create custom layout filters and use the raw API. “We’ve taken a platform approach to everything,” says Tocchini. “So we are an OAuth provider, you can build an app using our APIs, you can take our APIs and use that in a normal website without using our layout filers. Everything we have done is service-oriented.”

Disruption in the CMS Sector

The Grid is launching at a time of increasing volatility in the content management systems (CMS) tech sector.

The Grid’s business model of a hybrid open source and paid product is seeing the startup head towards breaking the record for crowd-sourced software projects, says Tocchini. It has been a proven approach amongst CMS platforms: both WordPress and Drupal offer a combination of open source and proprietary layers.

But overall, the CMS sector is seeing a number of significant changes.

Industry leader WordPress has established its prime position by offering a freemium platform approach that speeds user adoption. Now that market advantage is beginning to be chipped away by entrants like Squarespace that seek to differentiate their offering by focusing on both new website design forms, and by focusing on a drag and drop type interface to site design for their customers.

At the other end of the spectrum, Drupal’s developer-centric CMS model is stymied from accelerated growth due to the ongoing shortage of available developers.

But perhaps closest to The Grid’s value proposition is Contentful, which has created a content delivery mechanism totally built on APIs. Similar to The Grid, the idea is that businesses and website owners can simply upload their content, choose layout templates and let the API push the content to the right device in the most accessible layout format. Contentful have been gaining a lot of attention from established leaders used to the decoupling of data and end form, people like Adam Wiggins, cofounder of Heroku who was so impressed he joined their advisory board.

Tools like The Grid and Contentful are aiming to offer a new type of CMS product that is better at decoupling the data (content) from the form factor (layout). In this way, the hope is that it will make it easier in future for any content to go through a range of analytics microservices along the way to being shared: context and personalization awareness of the end user, predictive analytics, and device responsiveness.

Feature image via Flickr Creative Commons.

Group Created with Sketch.
THE NEW STACK UPDATE A newsletter digest of the week’s most important stories & analyses.