With more and more people looking to build static apps and websites, we thought it would be useful to look at what defines a static app, how they compare to traditional apps, and what the stack looks like.

What is a Static App?

Static applications and websites render in the user’s browser without the need for server side processing, this means that all the rendering of HTML, CSS, and JavaScript is done on the client side, rather then relying on server side technologies. Whilst traditionally managing static websites and applications may seem like hard work, the medium has come on leaps and bounds over the past few years to the extent that it’s now perfectly feasible to run heavy content, rich media websites, and applications entirely in the browser – Good times!

So grabbing and rendering UI elements doesn’t need roundtrips to your server, instead relying on the browser, which actually saves a heck of time for the user.

Why Should I Build a Static App?

Static apps are simpler, quicker to develop, and cheaper to host. In fact, it’s perfectly feasible to host your entire static app on a CDN.

Modern JavaScript frameworks like AngularJS can be used to quickly build your site’s front-end, then hooked up to back-end data services like Firebase, allowing you to quickly sketch out what your interface looks like and turn it into a functioning prototype.

As static apps are essentially just files stored on the web, then sent to the user, they can easily be scaled with off-the-shelf technology, so you can integrate third party services like Google Maps and billing systems through API’s to automate your site. I think Wallace & Gromit demonstrate this quite well:

The video shows how API’s work, so in this case Gromit pulls a lever and triggers a series of automated events – This is how static apps work by relying on specialised services that are suited to specific problems, so integrating third-party services saves time, makes your life easier, and automates services so you don’t have to do them manually.

Static Vs Traditional

Traditional refers to dynamic sites that not only use HTML and CSS, but include scripting as well with languages like PHP, ASP.NET, and Ruby on Rails. The main difference between the two is dynamic sites rely on servers, whereas static sites rely on browsers to process and render content.

Traditional

Advantages

• Functionality: Build unique services tailored to your users.
• Interactivity: Users can play with content, update, share, or personalise it based on their preferences.
• Control: Hook up and control back-end services that are specifically built for your needs.

Disadvantages

• Development Cost: Need to hire professional developers to build custom functionality.
• Hosting Cost: Generally dynamic sites are more server intensive, requiring higher spec and costly servers.
• Time Constraint: Creating a dynamic site requires months of planning and dev time, that’s without changes.

Static

Advantages

• Quick Build: Build pages individually and get a quick overview of what the site will look like before connecting back-end services.
• Flexibility: Every page can be customised and built on the fly to build unique pages.
• Cost: Static apps are less server intensive as they don’t require a lot of server side processing, plus they take less time to build which doesn’t require a lot of dev time.

Disadvantages

• No CMS: Need technical knowledge and a basic understanding of the languages like HTML, CSS, and JavaScript to make updates.
• Scalability: Static sites require individual pages to be made one at a time which can take a lot of effort.

The Static Stack

Although an entire static web application can be written in a single HTML file (embedding CSS/JavaScript), it isn’t the best idea when you start to expand and build outwards. Instead, static apps can use stacks to benefit from a wide variety of tools, such as:

Site Generators

Static apps are kept on the server and delivered to the browser as HTML, CSS, and JavaScript files, however they don’t start out that way. Site generators run tasks like concatenating and combining multiple files, compiling pre-processor languages, and allow you to ditch databases altogether.

There are lots of different site generators you can choose from, with one of the most popular being Jekyll. It’s most useful for bloggers wanting to create simple static pages. Whilst it has limited functionality out of the box, combining it with the Octopress framework allows you to add useful elements like pagination in a modular way.

Essentially it all comes down to your workflow, so when choosing a site generator be sure to pick something that fits, is maintainable, and has an active community. Check out the top open-source static site generators over at StaticGen.

MVC Frameworks

MVC frameworks are a set of tools and methods that organise your app’s file structure and logic, sometimes offering ways to render templates and manipulate HTML. Choosing the correct framework is critical as it impacts the way you do things, such as how your markup is written.

There are plenty of different MVC frameworks that come with their own advantages and disadvantages, so it’s important to do some research before diving in. A few of the top frameworks are Backbone.js, EmberJS, and AngularJS.

If you don’t know where to start, try TodoMVC as it has a wide variety of highly recommended MVC frameworks.

UI Kits

UI kits are frameworks that provide styles and behaviours for your app so you can hit the ground running without reinventing the wheel. Startups and businesses looking to get something up in a short space of time should be taking advantage of UI kits as they give you professionally styled elements like buttons, forms, grid layouts, and behaviours like alerts and popovers.

Popular UI kits include Kendo, Bootstrap, and Foundation.

Build Tools: Package Managers & Task Runners

Package managers and task runners help install shared libraries and open source code across multiple apps, they declare dependencies that will automatically be downloaded and installed, making it easier to add new code and update existing libraries.

Overall the biggest win is saving time. Running individual tasks like file concatenation and compression can be a chore, but running task managers automatically does the work for you and is easier to handle.

Popular package managers and task runners include NPM, Gulp, and Bower, all have active communities that add new modules nearly every day.

Choosing the correct static stack that works for you and your app is important for productivity and maintainability. Whatever you decide to choose you will definitely benefit from pre-built UI kits, build tools, and site generators to automate and speed up your workflow.

Static Apps + CDN = Awesome

As static apps mainly consist of HTML, CSS, JavaScript, and images, you can offload all your content on a CDN to speed up your pages to improve load times. As CDN’s have several geographically placed servers, delivering static assets worldwide is even faster, not to mention reduce hosting costs.

Get started by hosting all your front end content on a CDN as it’s easy peasy and doesn’t take long to get setup.