The Hottest Web Development Trends of 2019

Originally published January 6, 2017, updated Feb. 5, 2019.

Web developers are focusing on the customer this year.

There’s been a growing emphasis on the customer journey over the last few years, and 2019 will see more focus on providing a responsive, customized experience to every visitor.

To that end, the leading web development trends for 2019 are those that help developers engage visitors and provide personalized service.

Motion UI

Visitors won’t spend much time on a site if they can’t find what they need.

Simple, interactive design keeps users engaged and makes navigation straightforward.

One of the most common ways to add this functionality in 2019 is motion UI.

The trend includes both the concept of featuring simplified motion effects in web design and a specific tool for doing so.

Motion UI is a standalone Sass library for creating CSS transitions and animations.

It offers interactive motion effects that visually guide site visitors towards popular features. Developers like Motion UI for its customizable components and flexibility.

Adding effects is simple, so it’s an easy way to add interest to a site without throwing off development schedules.

Whether it’s done using Motion UI or another tool, dynamic visual effects are showing promise as a way to improve user engagement.

Expect wider adoption as developers explore its value in an enterprise context.

Adaptive Design

The line between mobile and home computing is so faint it’s practically invisible.

Consumers own just under 4 connected devices each (including smartphones, tablets, laptops, and other devices) and switch between them regularly during an average of 5.9 hours of daily media usage.

Companies who can provide consistent user experience regardless of how visitors reach their site will enjoy greater engagement and more return traffic.

It’s not enough for web design to be responsive anymore. Responsive design leads to awkward or unattractive sites on some devices.

Now design needs to be adaptive, able to rearrange itself to suit different device classes while providing a high-quality user experience for each.

This year, developers will explore optimized templates that translate content to a variety of device classes.

Artificial Intelligence and Chatbots

Artificial intelligence is everywhere. It’s already being used to improve search results, upsell products, power facial recognition programs on social media, and sort articles on sites like Wikipedia.

Now, it’s making a place in the customer service arena.

More than 40% of organizations worldwide plan to launch customer-facing artificial intelligence technology this year.

Chatbots are leading the charge. Within the next five years they’re set to become the most common AI application across all consumer applications.

Natural language processing (NLP) has matured enough that chatbots offer real value instead of frustrating customers.

In fact, over half of consumers like having the constant point of access to businesses chatbots provide.

Look for more chatbots, virtual agents, and NLP-based form filling tools throughout 2019.

Progressive Web Apps

Progressive web apps are still generating excitement in 2019.

Developers view them as a serious competitor for native apps, especially as more browsers support their full suite of features.

There are a lot of benefits to using PWAs. Development is often shorter and less costly. They offer excellent performance even on poor devices and in low signal areas.

Dropping below the three seconds most users wait before leaving a slow site helps lower bounce rates and increase time spent on-site.

PWA service workers provide limited offline functionality, which is a significant benefit with 70% of world economic growth over the next over next several years coming from emerging markets, that’s a significant advantage.

There are still some problems with browser compatibility, but those will fade away as browsers catch up to the latest W3c standards.

Looking forward

Some of these trends should grow in popularity as 2019 proceeds.

Artificial intelligence, for example, is making strides in proving its worth as an enterprise tool.

It would be hard to imagine anyone abandoning it right as it begins to realize its full potential.

Others aren’t as easy to predict. Motion UI may be exciting, but there aren’t any numbers on its practical impact yet.

For now, these are all solid tools for developers looking to boost performance and improve the customer experience.

Questions? Concepta’s team stays up to date on the latest web development trends. Drop us a line to talk about which ones are best for your next project!

Request a Consultation

Download FREE AI White Paper

Best Open Source Technologies for Web Development

best-open-source-technologies
Originally published Nov. 16, 2016, updated Nov. 8, 2018.

Twenty years after the Generic Public License (GPL) sparked the open source revolution, open source technology has become a keystone of the enterprise software market.

More than 80% of companies use open source software (OSS) to run at least a portion of their business, and that number is still growing. Take a look at some of the best open source web development tools in use today.

Bootstrap

Bootstrap is an open source tool used to create responsive web designs. It comes complete with JavaScript extensions, containers, forms, buttons, classes, media queries, grids and navigation.

Bootstrap has more stars on GitHub than any other project, accumulating more than 90,000 stars and 38,000 forks.

Visual Studio Code

This free, cross-platform code editor is winning over developers. 35% of them use it, especially when it comes to web development.

VS Code is highly extensible and has integrations with other languages including Python, Java, and Ruby.

One of its biggest draws is Intellisense, a flexible bundle of code completion features that lowers the risk of human error.

There’s also a popular Settings Sync extension which allows developers to easily share their configurations with each other.

Node.js

Node.js is a popular platform for creating network applications that are both scalable and fast. It uses less CPU horsepower and has a smaller memory footprint than the .NET framework or Java.

Node.js is revolutionary in that it helped usher in real-time web apps using websockets to deploy push technology. It uses an event-driven, non-blocking I/O structure based on Google’s V8 JavaScript engine.

While Node isn’t the best choice for heavy computation, it is ideal for creating network apps that can scale.

LESS

A CSS preprocessor, LESS has a similar syntax to CSS itself. Developed by Alexis Sellier, LESS helps developers make CSS more extensible and maintainable with a full feature set including functions, variables and mixins.

It can be used on the command line as a script file for a browser or inside a number of third-party tools.

AngularJS

AngularJS extends the power of HTML using markup for data binding and dynamic views.

A Model-View-Whatever (MVW) JavaScript platform, it is well-suited for creating one-page web applications and connecting HTML forms to JavaScript controllers and models.

It uses two-way binding to seamlessly synchronize data from the user interface with JavaScript objects.

Brackets

Adobe designed Brackets from the ground up to be a powerful tool for front-end developers and web designers.

Based on CodeMirror, its native shell rests on Google’s Chromium Embedded Framework. The lightweight web design editor is a superior tool for working on CSS, HTML and JavaScript.

Brackets adds dynamic visual tools inside the editing area. For example, developers can open a window into selected code or get instant feedback on changes by creating a real-time connection to a browser.

MongoDB

MongoDB is a popular document-oriented database. With the ability to work across multiple platforms, it uses documents with dynamic schemas for rapid data integration.

Related data is kept together for faster access. MongoDB lets developers start forming data records without knowing the data fields or values beforehand, which is ideal for arrays, hierarchical relationships and other complicated data structures—documents aren’t required to have the same fields.

It also comes with built-in auto-sharding and replication.

Cassandra

Originally developed at Facebook by Avinash Lakshman and Prashant Malik, Cassandra is a highly scalable database.

It has a short learning curve and is highly fault-tolerant. Unlike HBase, which prioritizes consistency, Cassandra was created to handle extreme workloads with an emphasis on throughput over consistency.

That makes Cassandra better suited for operational applications including product catalogs, time series and recommendations.

Looking Forward

The days when a developer could use the same handful of tools for every project are gone. It’s no longer enough to simply have a web presence.

That presence has to be created with a razor focus on quality, business goals, and innovation. Sophisticated open source frameworks and platforms emerge every day to help web developers handle the demand.

As developers explore ways to meet new challenges in enterprise computing, those tools will prove their worth- or find themselves relegated to the history section on Techopedia.

Every enterprise web application has unique requirements. Concepta works with a wide range of development tools to build a custom solution for each of our clients, always focusing on business goals first. Set up a free consultation to find out how we can solve your company’s biggest pain points!

Request a Consultation

Web Application Performance: Building Your Application For Growth

Building-Your-Web-Application

When talking about building web applications for growth, the conversation often devolves into a technical debate over whether to scale up or out or which specific technologies will suit an application.

These debates forget one of the most important rules of enterprise technology: business goals should drive the tech, not the other way around. Leaders should start by clarifying what is needed from the app as it grows before nailing down the tools.

There are three key concepts which all scaling technology should support in order for an app to be considered “built for growth”.

User-based Performance

Application performance can be measured many ways, but for public-facing apps the focus should usually be on user-centric metrics. “User-centric” refers to traits which directly affect the user’s experience. For example:

  • Load times
  • Reaction times to button clicks
  • Fast and reliable return of updated information

Applications are highly sensitive to user perception. More than half of users will abandon a web app entirely if it seems too slow. It damages their overall perception of the sponsoring business’ modernity, as well.

On the flip side, better performance leads to higher revenue and better ROI on advertising campaigns. Apps that load in 5 seconds or less see 25% more ad visibility and 70% longer session duration on average. They’re also enjoy higher user retention rates than slower applications.

When deciding between two technologies, choose the one that reduces the user-perceived delay the most. Determine how much of the delay is caused by each step of the data retrieval and presentation process, then prioritize tools that target the problem areas.

Scaling Cost

Web apps shouldn’t have a bigger cost to grow than to build in the first place, but that’s what can happen when growth isn’t considered from the start. Companies sometimes make design choices that are less investment during development but require complex, expensive scaling techniques.

An app can’t be called fully scalable unless it has a fixed marginal cost to grow. Adding users or capacity should be predictably priced and simple to implement. “Predictable” is a big part of being scalable. There’s no way to tell exactly how quickly an application will grow, but it is possible to create a scaling plan that shows leaders how much they can expect that growth to cost at each stage.

Surprises when scaling generally mean the original plan wasn’t thorough enough. Be sure to take into account vendor stability and projected rate increases. Also, don’t leave out any higher costs for maintenance at scale.

Security At Scale

Application security is one of the top concerns for CIOs in 2018. 45% of companies plan to spend more this year than they did in 2017. Despite the interest, 90% of web applications have at least one avoidable vulnerability. Common weak areas include encryption, authentication, and access control.

Hard-coded passwords are another serious risk. A full tenth of applications still use them for administrator-level privileges despite general discouragement by the security industry.

The risks from these vulnerabilities increase exponentially as an app grows into an appealing target for malicious actors. When planning for scalability, focus on growing securely as well as quickly. Don’t take risks with customer data that could lead to breaches, legal issues, and loss of reputation.

On a hopeful note, the problem does seem to be shrinking. In 2016 the average number of vulnerabilities per application was four, and that fell to three per app in 2017. That average may fall even more if the emphasis on security continues to drive safer design practices.

The True Measure of Scalability

Scalability isn’t only about whether applications do or don’t crash under unpredictable workloads. Availability is part of the puzzle, but not all. The true measure of scalability is whether a system is flexible enough to efficiently meet a company’s needs within an acceptable range of quality regardless of workload. Make that the focus of technology decisions and an highly scalable app will always be the result.

Concepta has more than ten years experience designing web applications that maintain high performance and security at scale. To learn more about the technologies we use and how they can benefit your business, set up a free consultation with one of our skilled developers.

Request a Consultation

From Web Development to Mobile: Stumbling Blocks and Strategies for Success

from-web-development-to-mobile-development
Mobile development is taking off right now. 50 billion more apps were downloaded last year than the one before. The average smartphone user has around a hundred on their phone, and download rates are steadily increasing as technology compensates for mobile limitations (specifically variable signal strength and limited device storage). With mobile growing in popularity, web developers are starting to explore mobile apps as a way to grow their skill sets and boost their salaries.  It’s definitely easier to move from general web development to mobile than the other way around. However, there are still some sticking points to consider.

The Value of Going Mobile

Mobile devices today are orders of magnitude more powerful than the desktops most people had growing up. Screens are larger, processors are faster, and AI-powered talk-to-text software has reduced the need to type on tiny keyboards. As smartphone technology advances, the amount of time spent on smartphones as opposed to desktop computers or laptops rises alongside it. The average American adult spends 3.14 hours on mobile devices daily versus 2.08 hours on desktops and laptops.
mobile-app-revenue
Source: Concepta, Inc.
Apps dominate online mobile time. There were 197 Billion app downloads in 2017, a number industry analysts predict will reach 350 billion by 2021. The global mean number of apps used per day ranges from 8-12 (with 10 being the US average). The largest age group using apps is the coveted 18-24 market. Young adult users driving the trend suggests that demand is likely to keep rising for the foreseeable future. Businesses are responding to the mobile trend by pushing for mobile responsive sites and apps meant to provide a seamless cross-platform experience. User experience directly affects sales; customers who have a poor experience are much less likely to visit, recommend a business, or return to an app or site. The lack of return customers hurts, especially since customers are increasingly making buying decisions based on a company’s mobile site. Searches made with local intent often result in a physical visit, and there are more mobile searches than on any other platform for a full 15 hours a day. That means even small to medium businesses need a mobile presence – and by extension, mobile developers. A sudden rise in demand combined with the relative newness of mobile development has led to noticeably higher income on the mobile side.
salaries-webdeveloper-mobile-developer
Source: Concepta, Inc.
The average salary for a mobile application developer is hovering around $71,072 per year. Compared to $53,036 annually for web developers, that’s a healthy incentive to shift from web development to mobile.

Stumbling Blocks

Switching to mobile development isn’t a seamless process. Web developers are used to working in a specific way and within a certain range of standards. Those methods aren’t always ideal for mobile development. Perhaps the biggest difference is that apps have a limited range of functions compared to a website. A website might do dozens of different things with specialized permutations of each function. An Amazon user, for example, has over thirty task menus they can access from their homepage alone. Apps are a different story. They’re by nature toolkits rather than full workshops. Incoming web developers often create designs that are much too broad in scope. Trying to do too much drags down the app’s performance and increases the crash rate. That leads into the second culture shift: performance. Apps may have fewer features, but they come with a significantly higher expectation of performance. Optimizing mobile app performance is a delicate balancing act with a long list of influential factors. Developers must consider memory usage, processor limitations, network coverage – in short, they have to plan for situations they have little to no control over.
americans-use-apps
Source: Concepta, Inc.
Users don’t make allowances for developer hurdles, either. They want apps to work well whenever and wherever they happen to use them.Mobile users who want to check out a menu aren’t going to sit in their car waiting for the restaurant’s page to load. They give it 3-6 seconds and try another restaurant. Developers need to make sure their app loads before the customer loses patience. Today’s apps are mostly device-specific. Hybrid technology is getting better all the time, but as of now native apps outperform hybrid apps by enough that native isn’t going anywhere for awhile. Mobile developers can have a specialty (iOS, Android, or Windows) but if they aren’t at least familiar with other devices they risk limiting their employability. Learning mobile involves learning new languages or utilizing device-agnostic tools that bridge the gap between devices. Balancing their OS skills doesn’t get developers out of learning hybrid methods; those are considered part of the essential basic mobile toolkit. Web design is widely accepted as a different field from web development, but mobile developers usually have to create their own user interface. Even when a designer does sketch out the app, the mobile developer adapts it for implementation. This puts a heavier burden on them as far as user experience. There’s not a lot of room to learn – literally. Smartphones screens are small and fingers are less precise than a mouse click. Mobile developers need to provide an easy-to-navigate app or customers will abandon the app. They must understand design conventions for multiple devices and weave them together into an attractive, intuitive UI. When an app does crash, it can be harder to troubleshoot than a website. Websites only need to account for their own services plus the user’s browser type and version. Apps have more moving parts, leading to more potential points of failure. For example:
  • Operating System
  • Signal availability
  • Device Hardware
Mobile developers have to cast a wide net to shake out the cause of problems. They even have to look at “symbiotic apps” commonly used together that might affect their own app’s performance. Once they find an issue, they’re faced with the problem of getting it to the customer. Fixes can’t be pushed to live apps. There has to be an OS or app version update which users must download to implement the fix. App users are highly fickle. Many get frustrated by frequent updates, so developers have to cram as many fixes into an update as possible while still getting the app back online in a timely fashion. Web developers who are considering switching to mobile may think it looks easy. Mobile can quickly get complicated, though.
Source: Concepta, Inc.
It’s simple enough to build a basic mobile app but much harder to profitably build one worth deploying and maintain it. Developers will work with device features that were never a concern with web development. For instance:
  • Mobile apps provide much more immediate data about the user and what they’re doing than websites. Mobile developers need to account for this to provide the best service.
  • Offline usage has to be prioritized for apps, which raises questions about when and how data will sync with central databases.
Developers trying to make things easier on themselves by building apps with one language top to bottom often wind up creating unnecessarily cumbersome code. Clients won’t be happy paying extra to maintain those needlessly complex apps. Security for apps is trickier but also more important. On the business side, internal resources can be put at risk by vulnerabilities introduced by apps. Users are in a similarly vulnerable position. An insecure app could be used to access anything stored on their device: mobile wallets, account details, and other personal data. Mobile developers have to mitigate this double threat by maintaining high testing and quality control throughout the development process. Discovery generally takes more time than with websites. App development and updating tends to be more expensive, so there’s more interest in “getting it right the first time”. There are also extra questions to answer while making decisions about format and feature priority.
  • Will the app be native or hybrid? If native, which platform is the primary focus?
  • How often will customers be using the device in low signal areas?
  • Is the app mainly mainly intended to operate on Wi-Fi?
  • What internal resources does it need to touch? What security concerns does this add?
Finally, apps meant for the app store must go through a submission process. Developers need to conform to store-specific standards, which adds a layer of complexity. The app has to be resubmitted after version updates, too. Publishing apps through a company site avoids this hassle, but that’s usually only an option for internal apps. Public apps do better in the app store, so developers have to be mindful of the relevant guidelines.

What’s Easier in Mobile

Despite these warning, some things are easier for mobile app developers. Those interested in becoming a full stack developer will have more success with mobile than general web development. There’s less database skill required, and backward compatibility isn’t usually an issue. Plus, programming newbies often feel more comfortable building mobile apps since the skillset is more limited. For web developers the transition can be even simpler. A healthy percentage (around 60%) of web development skills carry over to mobile. All the core programming concepts form a solid foundation for understanding mobile apps. Hybrid apps, which are generally web apps in native wrappers, will be noticeably easy for web developers to create. Mobile frameworks take some time to learn, but web developers shouldn’t have much trouble. The languages used in mobile apps are generally the same used in web development. Once developers get the hang of app-specific tools and conventions they should be ready to take on the title of mobile developer.

Strategies for Success

  • Use tools like PhoneGap to experiment with app building. PhoneGap can be used with HTML5 mobile frameworks to create apps that run on Android and iOS without buying a Mac. It’s very intuitive for web developers. While there are some hard to manage limitations for complex apps, tools like PhoneGap are a good way to decide if mobile is a skill developers really want to pursue.
  • Focus on Android first. Unless there’s a compelling argument otherwise, learn Android apps first. Android overtook iOS in terms of marketshare in 2014 and now accounts for around 85% of smartphone sales in the US. It’s broadly applicable and meets iOS performance in most categories. As a note, artists tend to prefer iOS by a small margin. Those looking to serve that market might consider studying iOS apps first.
  • Take some online courses first. Getting an overview before diving in keeps developers from forming bad habits. It also informs decision as to the types of apps to build and suggests tools that are currently in demand. Avoid very basic courses. Peer-to-peer style training will serve experienced developers better than those meant for programming beginners.
  • Start building apps. Make mistakes where it doesn’t matter before hanging a shingle as a professional mobile developer. Build a few small, simple projects on GitHub. Seek out criticism from community and learn from it.
  • Never stop learning. Mobile technology moves a little faster than web developers might expect, and there’s always something new to try. Stay on top of current trends. Know what technologies are ready to use and which to steer clients away from until they mature.
Finally, when learning mobile seems overwhelming remember this: the leap from web developer to mobile developer may be daunting, but it’s much easier than the other way around.

Not interested in learning mobile for your next app? Concepta’s mobile developers have built award-winning apps that reached the top of the App Store charts. Set up your free consultation to find out what they can do for you!

Request a Consultation

Key Web Development Concerns for Franchisors

Web-Development-Franchisors
Franchisors face an interesting dilemma when it comes to web development. They need to create a unified corporate presence with consistent branding in order to grow and provide full value to their franchisees. At the same time, they need to be flexible enough for franchisees to meet the unique market demands of their locations. These are the biggest web development concerns for franchisors in 2018.

Decide how to handle franchisee web development

Deciding how customer-facing sites will be set up is the first step in a web development strategy. There are two main options: Multi-tenancy: Set up one corporate environment where each franchisee can build and manage their own local page within the site. A centralized web presence keeps branding consistent and is highly effective at driving traffic. It allows for advertising campaigns to be more easily managed by corporate headquarters. This structure requires a tiered access Content Management System (CMS). Individual franchisees should have access to data for their own location while corporate facilitators need data oversight (but not necessarily creative control) to all stores within their districts. Because of the complexity, consolidated web presences can have a higher price point and more training demands. Franchisors also need to leave room for their franchisees to creatively respond to local market pressures without allowing them to affect corporate-level aspects like branding. Standalone Corporate site: The main site services only corporate-owned locations and campaigns. While there may be a store directory or links to franchisee sites, there’s no central structure for franchisees to build pages onto the corporate site. This is a less popular but also much less resource-intensive web development option. Franchisees have total freedom to build their own pages, but there’s an ominous amount of room for inconsistency and damaging campaigns by rogue franchisees. Corporate leadership will need to monitor these sites closely to avoid PR issues.

Prioritize responsive and mobile-friendly design

40% of mobile searches have local intent. Nearly 90% of people who search for a type of local business or product use that data to make a purchase or visit within a day. When companies send mobile offers, they’re redeemed 10 times more often than print coupons. In short, mobile is where the potential customers are. To drive traffic to franchisees, it needs to be a core focus of a franchisor’s digital strategy. SEO is the most pressing concern. Google sensibly prioritizes mobile-friendly pages for mobile searches, and most visitors won’t scroll past the top five results. 90% never check the second page. Optimizing for mobile helps franchisees rank high in those all-important local searches. Responsive design should be used to help the site look good across devices. More than half of adults shifts across more than one device a day, and one in five use a computer and a mobile device simultaneously. A bad experience on either can sour their perception of the whole company. If possible, deploy an app that franchisees can use. Mobile apps provide superior performance in uncertain signal environments. They consistently outperform traditional mobile pages in terms of loading speed, creating a higher quality customer experience. That’s one reason the average time in apps increased 69% from 2016 to 2017.

Connect franchisees with each other

The best chances for collective success lie in franchisees helping each other. No matter how helpful corporate tries to be, franchisees are in a unique position to offer each other support. They can find solutions to franchisee-unique problems, share or solicit advice, and spot opportunities for growth that others may have missed. Plus, interaction helps franchisees become socially invested in the company. Richer franchisee satisfaction leads to better performance and higher success rates, which sells more franchises. This isn’t news to most franchisors, who try to solve the problem with In-person company networking events. Those are fun, but in day to day operations it’s the constant online presence and accumulation of advice that will deliver real value to franchisees. Make space on the corporate site for peer-to-peer forums and messaging.

Leverage social media

Social media is an easy way for franchisees to connect with local audiences without disrupting corporate image. It provides a channel of communication between customers and individual locations that feels fresh, personal, and responsive. Plan for social media integration when designing an app or web page. Offer location-based connection and incentives for linking social media accounts. Loyalty programs are one popular option. As a side benefit, social media integration offers a wealth of data for corporate marketing purposes.

Final thoughts

While it doesn’t directly involve franchisees, any business who has them (or plans to) should make scalability a priority in web development. Trying to expand a rigid infrastructure results in poor performance, damaging a company’s reputation and potentially costing franchise sales. Consult with an experienced software developer to make sure adding franchisees won’t disrupt the central business.  

Are you struggling to incorporate franchisees into your website? Could a franchisee app add value to your business? Concepta offers free consultations to evaluate your digital franchisor operations and highlight potential opportunities. Schedule yours today!

Request a Consultation

JAMstack Review

jamstack
When it comes to web development, there are conflicting philosophies about the best architecture for balancing performance, cost, and security. One of the latest to gain popularity is JAMstack. JAMstack is the jazzy term coined by Netlify co-founder Matt Biilmann to describe a trend that’s been evolving for a while. It’s meant to update the concept of static website generators for a modern era. In this article, we’ll take a look inside JAMstack and see why supporters are calling it “the future of the internet.”

What is JAMstack?

JAMstack describes a way to build fast, database-independent web sites with the joint goals of improving overall performance and lowering development costs. It’s more a design principle than a detailed blueprint. Focus is kept on the front-end build, skipping server-side functions when possible and using a CDN (Content Delivery Network) to deliver content at lightning speed. In simple terms, JAMstack is a solution stack (also known as a software stack or technology stack). A stack encompases all the components that go into operating a site or application. Different stacks may have some of the same elements, but they’re arranged in a distinctive way in accordance with the underlying philosophy behind the stack’s architecture.

Breaking Down the Acronym

JAMstack features three core components:

JavaScript

JavaScript is popular everywhere right now, so it’s no surprise to find it here. In JAMstack JavaScript lives on the client-side, handling responses and requests. Because the stack stresses a style of build over specific technologies, this component can take many forms: pure JavaScript, a library like Vue.js, or even front-end JavaScript frameworks such as AngularJS.

APIs

Server-side processes and and database commands are handled via reusable APIs. JavaScript uses HTTP calls to access the APIs. Again, JAMstack has no requirement for where an API comes from. It can be custom-written for a specific app or selected from the host of third party options available.

Markup

Build tools or static site generators such as Grunt, Webpack, Metalsmith, Middleman, or Hugo are used to create templated markup. The markup is what users will see when visiting a site.

How JAMstack Works

The upfront work of JAMstack development happens offline. HTML is generated using static site generators and other build tools, then pushed to git as a collection of pre-built pages. When a user requests content, the HTML gets distributed by a CDN with no need for further processing. In contrast, there are a surprising number of steps between a user requesting a dynamic page and content actually loading. The request first goes to the server, which queries a database (like MySQL or MongoDB). That data (in conjunction with plug-ins and active themes) is used to create an HTML document within the server environment which is then presented to the user. Essentially, templating occurs every time a page is called up instead of being done in advance.

Benefits of JAMstack

JAMstack has some major advantages over the traditional app server model.

Speed

Static websites have no need to query a database, and their code has already been compiled. Every user gets the same page with dynamic elements handled client-side through third-party tools like Disqus. There’s next to no server-side work. That means pages can be returned up to six times faster than otherwise possible.

Security

The absence of a database makes a static site incredibly secure. It’s immune to SQL injection, for example. There are fewer server interactions overall to be targeted by malicious actors. In addition, it’s widely known that the more complex software is, the more room there is for small errors that compromise security. The JAMstack philosophy reduces the number of “moving parts” involved in development, so developers can more easily spot and fix potential weaknesses.

Control

Everything from JavaScript to markdown content documents is stored in a git repository. Developers have complete version control over the code. It’s simple to set up continuous deployment so the site is updated every time new content is pushed to git.

Scaling

CDNs distribute content across their entire network. They’re well able to handle sudden unexpected loads, such as a surge of interest after an ad campaign goes viral.

Cost

The overall expense of building, maintaining, and deploying a JAMstack site are lower. Most of this reduction comes from the focus on the frontend; fewer servers are needed, and the development team can be smaller. Hosting is also dramatically cheaper without a database involved.

Maintenance

Once a site is live, there’s almost no need for maintenance. Owners don’t have to perform updates and only need to do a back-up when content changes. This makes JAMstack a great option for small businesses who want an informative landing page

Limitations of JAMstack

JAMstack has enormous potential, but it isn’t perfect. Critics of the style have offered these cautions.

JAMstack has a steep learning curve for non-technical users

The JAMstack set-up isn’t very approachable for content editors. User-friendly CMS’s like WordPress and Drupal have become the expected standard for adding content to blogs and company homepages. The average employee given charge of the company’s blog would need training in Markdown just to make a blog post. Since the content is stored in the same repository as the code, it’s typically easier (and safer) for IT to perform any updates. There are markdown generators and JAMstack-friendly updating tools available, but they have a long way to go before they’ll be as accessible as WordPress. For now, JAMstack tends to add to the IT workload.

All changes have to go through a developer 

Even in cases where an employee can handle content editing, anything beyond trivial changes to style requires new code. Labor is one of the most expensive parts of development, so the cost of those changes adds up fast.

It’s nearly impossible to have member-differentiated content

Tracking memberships and tiers of access requires a database, and databases aren’t part of the JAMstack worldview. That means no paywalls, no premium content, and no easy way to set up classes of users with varying levels of privileges. Some third party options like Disqus have log-ins, but that’s handled by their platform and doesn’t affect the page content.

Dynamic features can only be added through client-side third party solutions

Comment sections, forums, polls, galleries, stores, and other types of dynamic features are possible through third-party options (Livefyre, lunr.js search, etc). Some view third party services as a bonus, but they become a burden when they’re required for every dynamic feature of a page. Most developers will recommend a WordPress or similar site when there’s a large amount of dynamic content involved.

Some projects just aren’t a good fit for JAMstack

JAMstack isn’t a magic bullet. The theory scales well in terms of users, but not so much in terms of size or complexity. It isn’t suitable for projects that require frequent updates and new pages, several interactive features, or real-time updates.

How Does JAMstack Compare to Other Stacks?

As mentioned earlier, JAMstack is more a philosophy than a particular set of software and components. Other stacks are more specific as to what technology is included. Every system doesn’t have a catchy title, but there are two named stacks that JAMstack is often compared to: LAMP and MEAN.

LAMP (Linux, Apache, MySQL, PHP)

LAMP is used to build dynamic web sites and web apps. It’ve very different from JAMstack; pages are reconstructed from a database on request rather than being held as flat documents ready for delivery. Content addition and modification is easier with LAMP (though future third party options are wearing away at this disparity). However, JAMstack delivers content much faster.

MEAN (MongoDB, Express.js, Angular, and Node.js)

Though MEAN is also designed for creating dynamic web sites and apps, it has more in common with JAMstack. All the MEAN components are written in JavaScripts. Some (like Angular) appear frequently in JAMstack sites. The key difference is that MEAN still assembles pages from databases on request, like LAMP. Because of that, MEAN and LAMP are more like each other than either is like JAMstack.

Real World Applications

Though JAMstack as a named stack is a recent development, engineers have been trending this way for a while. These examples show the variety of sites that can be built using JAM.

Smashing Magazine

Smashing Magazine is an online magazine for web designers and developers. Managing the tangle of technology that made up their stack, especially caching plugins for WordPress, was impacting performance and load times. They decided to build an entirely new website using JAMstack. The site is still in open beta, but it shows enormous promise. Load times have gone from 800ms time to first load to 80ms.

Sphero

Sphero is a robotic toy that wirelessly interacts with mobile devices. Though the toy is complex, the company’s web site needs were simple. JAMstack provides the base for this beautiful site that loads quickly on most devices despite being intensely graphics-heavy.

Marvel Search

Most of the time static sites aren’t suitable to huge projects. There are exceptions, though. Marvel Search is a searchable catalog of nearly 2,000 Marvel characters by name or team. More sophisticated databases offer more information and interactive character content, but the speed with which these pre-built pages load offers a superior user experience.

Looking Forward

Most websites have fewer than a dozen pages in total and won’t need to be updated often. For these sites, JAMstack has a lot to offer. It can lower development costs, reduce security risks, and improve the user experience by providing faster load times.

Could JAMstack be an option for your next enterprise web site? Contact Concepta for a free assessment of your digital needs!

Request a Consultation