Startups

Supercharge Web Development with Git and Netlify

by
Geoff Stevens
January 16, 2019

[ TL;DR ]

  • Frontend development is quickly being decoupled from backend development
  • JAMstack is a web development architecture built from JavaScript, APIs, and Markup that is easier and faster for frontend developers
  • Netlify operationalizes the JAMstack with a Git-centric workflow and an application delivery network
  • JAMstack and Netlify make web development faster and easier for developers

Replacing infrastructure maintenance with Git

Web development has changed dramatically over the past few years. The shift to the API economy, the rise of serverless computing have driven a resurgence of static websites using the JAMstack, transforming modern web development.

Netlify, a tool for developers to quickly build and deploy websites, has gained significant traction over the past year.

Hailed as a publishing platform for the modern web, Netlify offers hosting and serverless backend services for static websites. Through Netlify’s platform, developers can continuously deploy their sites across Netlify’s global application delivery network using Git.

That’s right. Git. A low-level tool for developers.

Netlify recently announced their $30M Series B round led by Kleiner Perkins. Netlify previously raised $12M in 2017 from Andreessen Horowitz and $2.1M in 2016 from the founders of GitHub, Heroku, and Rackspace Cloud.  

With a growing community of more than 300,000 users as of late summer, Netlify’s all-in-one web deployment tool resonates with developers. And Mathias Biilmann, CEO of Netlify, has big ambitions:

“We’re not trying to make managing infrastructure easy. We want to make it totally unnecessary.”

The JAMstack enables hyper web development

To replace the complexity and tedium of managing server infrastructure, Netlify has taken advantage of a new development architecture known as the JAMstack.

At its core, the JAMstack is a “modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.” The JAMstack is built with JavaScript libraries like Vue.js and React.js, APIs like Twilio and Stripe, and Markup tools like Gatsby and Webpack.

Parts of the JAMstack, including JavaScript, APIs, and Markup
A simple diagram of the key parts of the JAMstack

With its simplicity and modularity, the JAMstack is ideal for quickly building powerful static sites.

The JAMstack reinvents the web development experience by decoupling frontend and backend development.

Frontend developers can leverage powerful JavaScript files and site generators to build highly interactive and dynamic static sites. Any communication with a backend server is done through APIs, which let web developers quickly integrate new functionality from third parties.

Developers can now avoid having to manually maintain server infrastructure and complex frameworks like Drupal, Joomla, and Wordpress.

If you’re looking for a complete rundown of the JAMstack check out Hyper Web Development and the Rise of the JAMstack.

The simplicity of a Git-centric workflow and continuous delivery

If you commit the JAMstack, Netlify is designed to make the development and deployment process even easier.

The magic behind Netlify lies in its ability to leverage the power of Git to operationalize the JAMstack. By connecting a git repository to a Netlify-deployed site, you can keep the two in sync.

Diagram of Netlify and Git from Rise of the JAMstack
Diagram reproduced from Netlify CEO Mathias Biillman's presentation Rise of the JAMstack

To get started, simply sign up for a Netlify account and link your GitHub, GitLab, or Bitbucket account. Pick a repository you would like to publish, select a few build options, and deploy. Each commit thereafter triggers Netlify to build and deploy your updated code.

Netlify then quickly distributes your content across their application delivery network, a CDN with advanced functionality for entire sites and applications.

By layering a Git-centric system on top of the decoupled architecture behind the JAMstack, Netlify aims to take the workflows you’re already using as a developer and make them far more powerful.

Powerful version control for the deployment process

As you begin to explore Netlify, you’ll notice a few easy ways to deploy projects. You can drag and drop files to get started quickly, connect a git repository to build automatically, or use Netlify’s command line tools.

Each deployment of your site is marked as a new version, which allows you to roll back at any time to a previous version. You can also deploy specific branches with their own permalinks to test features before sending them to production.

Netlify also has a feature Branch Split Testing that lets you divide traffic to your site between two or more Git branches. Developers can work closely with marketing teams to integrate analytics and tracking for A/B testing directly within their Git workflow.

At its core, Netlify is a Git-centric web development tool that smoothly handles your site’s version control with ease.

A highly extensible and customizable setup

Aside from the Git integration and application delivery network, Netlify offers a slew of other great features. The extra features on top of Netlify’s robust version system make Netlify one of the best tools for JAMstack development.

If you’re looking for even greater functionality out of the box, Netlify has built an ecosystem of open source tools that integrate well with their core offering. The available projects include a CMS, user registration and authentication tool, and an ecommerce solution.

You can add analytics and tracking through automatic snippet injection. Netlify’s built-in form handling capabilities uses Netlify’s build bots to parse HTML files and automatically connect specific forms. webhooks.

Access to these tools within Netlify means less reinventing the wheel, and more building.

If you want to build an even more customized solution, Netlify provides a fast way to get up and running with AWS Lambda functions. Netlify can deploy Lambda functions without an AWS account, with all function management, deployment, and version control handled within Netlify.

Speed, scalability, and security with the JAMstack on Netlify

The benefits of building and deploying sites with the JAMstack on Netlify don’t stop with the development experience.

The JAMstack relies on static sites—a collection of files that can be easily deployed through Netlify without having to manage any infrastructure. Because of Netlify’s setup, you’ll notice some potential improvements to how your site operates:

  • Better performance: Pre-built, static files can be distributed over a CDN, like Netlify, eliminating server bottlenecks. Server dependent tools like Wordpress and Heroku can be bulky and slow.
  • Greater scalability: Static content scales dynamically on a CDN, allowing your site to reach more people quickly and cheaply. Netlify eliminates the need to scale your own infrastructure.
  • Higher security: With no servers to run or maintain, the threat of breaches or code injections diminishes significantly. As the JAMstack requires APIs to communicate with any servers or databases, security can be offloaded to these APIs and third-party services.

With Netlify, web developers can see significant improvements to both the sites they deploy and the process they use to deploy those sites.

A promising future for Netlify and the JAMstack

GitHub founder Tom Preston-Warner predicted that “within 5 years, you’ll build your next large scale, fully featured web app with JAMstack and deploy on Netlify.”

If you’re interested in trying it out, Netlify is free for personal websites and projects. With a growing community of developers, Netlify will continue to push the boundaries of what is possible with the JAMstack.

CodePen co-founder Chris Coyier declared “this is where the web is going, Netlify is just bringing it to us all a lot faster.”

Faster, indeed.

Share this article!

Subscribe to our newsletter

Get the Software Review delivered straight to your inbox.
Thanks for signing up!
Oops! Please use a valid email address!

Keep reading

Tech
Code Editor Wars: The Battle for the Hearts and Minds of Developers
Microsoft embraced open source, shipped VS Code, and acquired GitHub. Why?
by
Software Staff
November 6, 2018
Tools
When Git Push Comes to Git Shove
The world of Git is has changed dramatically after Microsoft's acquisition of GitHub and Google's investment in GitLab.
by
Geoff Stevens
December 6, 2018
Productivity
Developer Productivity: A Bigger Constraint to Innovation than Capital
Executives worry most about getting access to developer talent, but the real bottleneck is developer productivity.
by
Geoff Stevens
December 6, 2018