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.
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.
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.
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.
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.
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 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 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.
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.
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.
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.