ic_agile_128ic_business_128ic_agile_white_128ic_banknote_smile_128ic_business_128ic_business_128ic_checkmark_128ic_client_team_manager_128ic_code_file_128ic_code_files_128ic_corporate_cloud_platforms_128ic_crossplatform_apps_128ic_dedicated_team_128ic_developer_128ic_development_team_128ic_enterprise_128ic_faster_timeframe_128ic_fixed_price_128ic_graph_down_128ic_graph_down_128ic_hourly_128ic_hourly_white_128ic_information_finder_128ic_junior_developer_128ic_managed_team_128ic_message_128ic_mobile_app_startups_128ic_mobile_development_128ic_mobile_development_up_128ic_mobile_devices_128ic_multiplatform_128ic_multiplatform_white_128ic_pricetag_128ic_project_checklist_128ic_project_management_128ic_project_management_team_128ic_research_and_development_team_128ic_scalable_team_128ic_senior_developer_128ic_smaller_codebase_128ic_smaller_price_128ic_startup_128ic_team_manager_128ic_three_times_faster_128K&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxArrow_Dropdownic_001_google+_16ic_002_xing_16Group 2ic_003_facebook_16ic_004_linkedIn_16Groupic_005_message_16ic_006_upload_16ic_007_remove_16ic_008_email_16ic_009_attachment_16ic_010_file_16ic_011_name_16ic_012_arrow_left_16ic_013_arrow_right_16ic_014_arrow_down_16ic_015_arrow_up_16ic_016_dropdown_arrow_down_16ic_016_dropdown_arrow_leftic_016_dropdown_arrow_rightic_017_K&C_dropdown_arrow_up_16ic_018_language_16ic_019_Quote_16ic_020_+_16ic_021_=_16ic_022_phone_16ic_023_twitter_16ic_024_position_16ic_025_company_16ic_026_search_16ic_027_mobile_16ic_028_fax_16ic_029_location_16ic_030_enlarge_16ic_031_downscale_16ic_032_contactic_download_normal_16pxic_033_skype_16ic_006_download_16 copySearchGroup 26Rss_font_awesomeConsul_VerticalLogo_FullColorPacker_VerticalLogo_FullColorTerraform_VerticalLogo_FullColorVault_VerticalLogo_FullColorethereum_black_64ic_Interest_based_64ic_acrivate_card_64ic_api_client_64ic_application_architecture_64ic_application_architecture_ white_64ic_application_development_user_64ic_application_development_user_64ic_arrow_down_64ic_automated_backups_64ic_automated_infrastructure_provisioning_64ic_automated_infrastructure_provisioning_white_64ic_automated_storage_64ic_automated_storage_64ic_automation_64ic_microservice_architecture_64ic_avaliability_across_the_world_64ic_avaliability_across_the_world_white_64ic_blockchain_64ic_blockchain_white_64ic_brackets_64ic_brackets_64ic_build_64ic_build_64ic_build_64ic_business_64ic_business_partnership_64ic_business_partnership_white_64ic_business_64ic_calculator_64ic_calendar_64ic_car_rent_64ic_card_renewal_64ic_chat_64ic_chat_bubbles_64ic_chat_bubbles_64ic_chat_white_64ic_checklist_64ic_checkmark_64ic_blockchain_64ic_smart_development_64ic_blockchain_consulting_64ic_checkmark_white_64ic_clock_64ic_clock_white_64ic_cloud_media_64ic_cloud_solutionsic_cloud_solutions_whiteic_cluster_64ic_cluster_white_64ic_code_base_optimization_64ic_coding_64ic_coding_white_64ic_commenting_widget_64ic_commenting_widget_64ic_containers_64ic_containers_white_64ic_continious_64ic_continious_delivery_64ic_continious_delivery_white_64ic_continious_release_64ic_continious_release_white_64ic_continious_white_64ic_cost_saving_64ic_cost_saving_white_64ic_cpu_load_64ic_credit_card_64ic_crossplatform_app_development_64ic_crossplatform_app_development_white_64ic_custom_crm_64ic_custom_crm_64ic_independence_consulring_64ic_database_calls_64ic_database_calls_white_64ic_dedicated_teams_64ic_dedicated_teams_64ic_desktop_application_user_64ic_desktop_application_user_64ic_desktop_code_64ic_desktop_code_white_64ic_developer_64ic_developer_white_64ic_development_64ic_devops_64ic_devops_64ic_documents_64ic_documents_graph_64ic_documents_graph_white_64ic_documents_white_64ic_download_presentation_64ic_education_64ic_email_open_64ic_email_open_white_64ic_environment_healthcheckethereum_white_64ic_euro_64ic_euro_white_64ic_failure_solved_64ic_gdpr_64ic_globe_outlines_64ic_good_quality_64ic_high_load_websites_64ic_high_load_websites_white_64ic_hotel_booking_64ic_inability_64ic_inability_white_64ic_increase_64ic_increase_white_64ic_increasing_team_64ic_independence_64ic_integration_64ic_it_outsourcing_64ic_it_outsourcing_64ic_knowledge_sharing_64ic_mobile_devices_64ic_laptop_user_64ic_laptop_user_white_64ic_launch_64ic_launch_white_64ic_learning_64ic_learning_two_white_64ic_lighthouse_64ic_link_64ic_load_balancer_64ic_load_balancer_64ic_load_card_64ic_lock_64ic_lock_white_64ic_low_cost_64ic_low_load_websites_64ic_maintenance_tools_64ic_maintenance_tools_white_64ic_media_player_64ic_media_player_white_64ic_messaging_platforms_64ic_microservice_architecture_64ic_microservices_64ic_microservices_64ic_mobile_app_64ic_mobile_app_64ic_mobile_content_64ic_mobile_development_64ic_mobile_development_white_64ic_mobile_devices_64ic_mobile_devices_white_64ic_mobile_payments_64ic_mobile_social_media_applications_64ic_mobile_workflows_64ic_money_transfers_64ic_multimedia_sharing_64ic_multimedia_sharing_white_64ic_my_garage_64ic_no_access_64ic_no_access_white_64ic_no_oldschool_64ic_online_marketplaces_64ic_online_marketplaces_white_64ic_online_trading_64ic_online_trading_64ic_pair_device_64ic_parallels_64ic_parallels_white_64ic_passcode_64ic_payment_systems_64ic_performance_64ic_performance_issues_64ic_performance_issues_white_64ic_performance_white_64ic_plane_64ic_plane_white_64ic_plus_64ic_plus_64ic_pricetags_64ic_pricetags_64ic_product_64ic_product_search_64ic_product_white_64ic_productivity_tools_64ic_productivity_tools_64ic_project_delivery_64ic_project_delivery_white_64ic_project_management_64ic_project_management_collaboration_64ic_project_management_team_64ic_project_management_team_white_64ic_project_risks_reduced_64ic_quality_mark_64ic_quality_mark_64ic_quality_mark_white_64ic_question_64ic_react_native_64ic_response_time_64ic_response_time_white_64ic_rest_api_64ic_retail_64ic_transparency_consulting_64ic_scale_up_64ic_scale_up_white_64ic_security_64ic_security_64ic_self_healing_64ic_self_healing_64 copyic_send_money_64ic_server_64ic_server_white_64ic_shopping_64ic_shopping_white_64ic_sleep_mode_64ic_small_is_beautiful_64ic_smaller_price_64ic_social_benefits_64ic_social_connections_64ic_socket_64Group 20ic_spare_parts_for_cars_64ic_spare_parts_for_cars_white_64ic_speedometer_64ic_performance_consulting_64ic_speedometer_white_64ic_startup_64ic_startup_white _64ic_target_64ic_team_64ic_testing_64ic_testing_checklist_64ic_testing_checklist_white_64ic_testing_white_64ic_three_times_faster_64ic_touch_64ic_touch_id_64ic_touch_white_64ic_transparency_64ic_ui_design_desktop_64ic_ui_design_mobile_64ic_ui_design_mobile_white_64ic_umbrella_64ic_umbrella_64ic_umbrella_white_64ic_up_and_down_scaling_64ic_up_and_down_scaling_64ic_users_64ic_users_white_64ic_ux_design_64ic_ux_design_desktop_64ic_ux_design_64ic_ux_design_white_64ic_vehicle_64ic_web_based_search_64ic_web_based_search_white_64ic_web_browser_code_64ic_web_browser_developer_mode_64ic_web_browser_user_64ic_web_development_64ic_web_development_white_64ic_web_portals_64ic_web_portals_64ic_web_user_64ic_web_user_white64ic_workflow_64ic_workflow_steps_64ic_workflow_steps_white_64ic_workflow_white_64ic_working_environment_64solidity_blackGroup 19

JAMSTACK IS THE NEW FACE OF STATIC SITES

In the past year, we have witnessed a lot of breakthroughs and outstanding releases in the world of IT. Yet, today, we’re going to devote the article to a ‘quiet revolution’ that continues to happen even now, gaining even more admirers, as well as haters in the development community. We’re talking about the movement for static websites based on the JAMstack approach as opposed to dynamic ones.

Static vs. Dynamic

To fully understand what JAMstack is, we should have a clear understanding of what dynamic and static websites are. To begin with, all websites are divided into these two groups. In the first case, when a user requests a page, the page is collected at the time of the request, and then displayed in the browser. In the second, the server already stores the ready pages.


The defining features of dynamic websites are their functionality, customization, and ease of updating. It allows you to create complex systems. The disadvantage of most dynamiс websites is the high usage of system resources due to the inclusion of a web-server and database.


Static websites, as we mentioned above, consist of the ready web-pages (HTML, JS, graphics, fonts), downloaded and stored on the server. Essential advantages of static websites are high-speed page load and increased resistance to hacker attacks. If correctly built, static websites can much better maintain the website functioning at high traffic.



But, let’s not set aside some disadvantages. To make even the slightest change to the website, you need to generate it from scratch. To make this process easier, the world of modern technologies suggests a variety of solutions, namely Static Site Generators (SSG) and… JAMstack.

What is JAMstack?

JAMstack is a new trend in the web application architecture, whose name stands for “J” - client-side JavaScript, “A” - reusable API, and “M” - pre-built Markup. Let’s look at each of them.


JavaScript (JS). It’s a programming language. The vast majority of websites use it, and plenty of developers regard it as one of the universal languages with the fastest learning curve.


API. This is the set of technologies that includes subroutine definitions, communication protocols, and tools for building software.


Markup. It’s a computer language that includes tags to define elements within the document. It differs from a typical programming syntax and can be read by a human. The most used among them are HTML and XML.

Advantages of JAMstack

Speed. This metric is the most beneficial thing about JAMstack. It gives a faster Time to First Byte (TTFB) if CDN (Content Delivery Network) or GitPages are used with this. This is due to a lack of interaction with a database: the file is already compiled and gets directly served to the browser from a CDN. Moreover, the caching process is lots easier. URLs return the same HTML to all users, and there are no query parameters that can affect the version of the cached page.


Security. The lack of server-side & database operations makes a static site substantially more secure. As a result, it’s immune to SQL injection.


Less Cost. You can get away with cheap hosting as long as you pair it with a fast CDN.


SEO. Creating pages and structure of the project are more flexible. Many traditional CMS’s will automatically generate pages for categories, tags etc., but SSGs let us fine-tune page creation. You don’t have a CMS dictating the way you should structure your content and pages.


However, all mentioned pros for your website based on JAMstack can be lost if you don't optimize graphic content and follow best practices, suggested by the Netlify co-founder Mathias Biilmann. If you do it in the right way, you will have a perfect site with all the pros.


Performance is the most significant at this. But what does it mean for customers? We will explain. If you have a static site based on the JAMstack approach, you will have:



-A faster page


-Better user experience and a better Google ranking


-More traffic, and thus sales


For now, JAMstack has a substantial community which has been producing best practices. Based on the research, we can say that the ecosystem around this approach has already been formed and has shown us a number of stable solutions that can bring clear benefits in comparison with dynamic sites.

Disadvantages of JAMstack

Difficult to manage roles. Namely, user permissions and editor roles. But even in this case, this flexible approach provides us with various ways of solving this problem. An advanced Headless CMS gives us an opportunity to manage permissions and roles (Contentful, Prismic, and Directus). If you need more features related to managing user permissions and editor roles, using a traditional CMS would be the worst thing to do (it contradicts the JAMstack approach).


Ill-considered dynamic elements. If you need shopping carts, feedback forms, comments, etc., you will need to use additional web-services. A large number of web services can jeopardize our security. You must be sure that scripts are not fake and their exchange with web services over HTTPS is secure.


Non-competitive price. Some tech solutions on the market can be cheaper than JAMstack (for example, WordPress, which is in the skillset of each and every developer and being offered by a range of dev agencies).


The complexity of scaling based on the complexity and size of the project. Obviously, the JAMStack project cannot be compared to complex systems.


Real-time updates. The JAMstack approach will not be intended for real-time updates.

Developing a JAMstack-based Website

1.Choose a host with a fast CDN to deliver your static files. It can be Amazon Web Services (AWS) such as S3, Netlify, or Custom Setups with CloudFlare.


2.Make a decision about a Static Site Generator (SSG). There are a lot of SSGs, but we have already identified the most popular among them:


-Jekyll (built in Ruby),

-Hugo (built around Google’s Go programming language),

-Gatsby (using ReactJS),

-Hexo (created with Node.js).


3. Need to make decision about a Git-based CMS or an API-driven CMS.


4. If you need dynamic features You will need to choose web service platforms (Disqus or IntenseDebate for comments, FormKeep for forms, Lunr for search, Stripe for the payment, Cloudinary for media management).


If you’re still not sure about JAMstack in terms of a commercial project, we’d like to reassure you. Many well-known companies, such as Red Bull, Mailchimp, New York Times, Sequoia Capital, and Smashing Magazine, have already implemented this stack. More websites with examples can be found here.

Conclusion

JAMstack is a great approach. Even though, it can be useful only for specific projects, the benefits of static development in many cases outweigh the drawbacks. For small and middle-size projects with a specific list of dynamic functions, this is the best option. The main idea is to choose the right tool for the right problem.



Just don’t forget that if you want to take advantage of this approach, you will need an excellent team of developers which will achieve better performance, higher security and cheaper and easier scaling. This is exactly what K&C do best!

SHARE WITH FRIENDS
You might find this interesting
Our cases
Bosch Classic Cars - Digital Engagement Platform for 19K Vintage Car Owners
Our cases
Liferay Portal Performance Tuning Services for a Major Online Gaming Software Supplier
Web
Three Authentication Approaches to Keep Your Clients Safe
Our cases
How to apply React Native while developing heavy cross-platform mobile apps
Mobile
Reasons to believe in Ionic hybrid app
Web
SEO Tips & Tricks for Single Page Web Applications
E-book
How to Secure Web Product Development — FREE eBook
E-book
Digital Transformation: the Philosopher’s Stone of Economic Growth
Web,Outsourcing,Other
Angular 5 VS React.js – Who’s Going to Set the Tone in the Upcoming Year?
Web
Agile and DevOps are Key Drivers of Digital Transformation
Web
K&C insights: how to make your workflow work for you
Web,Other
GoLang: Features, Pros and Cons
Our cases
Reference: Major producer of auto electronics and spare parts
Outsourcing,Other
Hybrid, SaaS+PaaS, IoT: Cloud Trends to Catch in 2018
Web,Outsourcing,Other
Angular vs. React vs. Vue – Let the Fight Start!
DevOps
DevOps with Puppet: Tips on Setting it up for Configuring Servers
Web,Outsourcing,Other
JS Frameworks: The Trendiest Frameworks You Should Know
Our cases
Micro-service Architecture for New AngularJS Application - Case Study
Mobile
Native or Hybrid Apps: A Quick Comparison
DevOps
Installation and setting up: Nextcloud as a local network storage on CentOS7
Web
Centralized Logging with Logstash, Elasticsearch & Kibana
Web
A Guidance for Keeping Your Web Development Project Within the Budget: Three Key Pillars
Web
Plan to Succeed: 4 Tips for Building Scalable Software
Web
Microservices… when do we need them?
Web
Debunking imaginary shortcomings of cross-platform frameworks
Our cases
Portal Performance Tuning For Major German Travel Agency
Web
Technologies that Foster Digital Transformation
Web,Other
How to Make Your Web Solution Rock: 7 Areas to Check
Web
4 Time-Saving Ways to Test Your Cross Platform Mobile App
Web,Outsourcing,Other
Angular 5.0.0 – A Better Version of Itself
E-book
Top Tools for Cost-Effective Web Development — eBook
Web
A secret formula of an agile dream team
Web
Cloud Deployment: Overview of Options
Web
How to Motivate Your Dedicated Team to Work with Legacy Projects
Web,Our cases
White Label: A Customized Software Solution from a Business and Tech Perspective
Web
Cost efficient technologies
Web
Scaling software solutions - how it works
DevOps,Outsourcing,Other
How to setup Kubernetes cluster on AWS
DevOps
Docker: Virtualize Your Development Environment Right
Web
When Microservices Help Make Future-Ready Products
Outsourcing,Other
How to Ramp up Your Team Wisely
Outsourcing,Testing
How the QA Team Tests Your Project
DevOps
How We Manage Our Infrastructure with Chef
Our cases
Reformation of Deployment Cycle for Bosch Classic Cars Portal
Our cases
Fast and Lightweight Mobile Application based on PhoneGap/ Cordova
Our cases
Drivelog.de — Web Marketplace for Car Owners and Service Providers
DevOps
Use case: how to build and run Docker containers with NVIDIA GPUs
DevOps
How We Use Ansіble for Configuration of Our Environments
Web
Angular 2.0 vs Angular 1.4. What fits you best?
Other
Big Data: Why Your Business Needs it ASAP
Web,Outsourcing,Other
How a Company Can Benefit from White Label: K&C experience
DevOps
How to Build a Rancher & Docker Based Cloud
DevOps
Setting Up: Traefik Balancer In Rancher Cloud
E-book
Determining Approaches to Mobile App Development
Web,Other
Dedicated Teams for Web Development: Choice Criteria to be Checked
Web
Angular 4 vs React – what to choose in 2017
Outsourcing
The BPM in the Microservice Environment
DevOps,Outsourcing,Other
ROCKET.CHAT as an internal messaging system and helpdesk platform
Web,Amazon Web Services
Monolith, Microservices, Serverless... Are We in the Middle of the Way?
Web
JQuery vs. Angular: Ad Astra per Aspera
DevOps
How to start services on Linux
Web
Advanced Technologies for Marketing Automation
Web,Outsourcing
Node.js vs. Angular.js – Two Sides of the Same Coin
DevOps,Outsourcing
AWS DevOps: A New Way to Run Business
Web,Outsourcing
Why It’s Better to Use Vue.js than Angular and React in 2018
Web,Outsourcing
Migration from Angular 1 to Angular 5
DevOps,Outsourcing,Amazon Web Services
Information Security with AWS DevOps
Other
Europe’s Big Payments Directive PSD2
Our cases
The Platform Providing Event Organization
Web,Outsourcing,Other
Golang vs. Node.js
Our cases
VAIX - Fault tolerant infrastructure for 24/7 high-load machine learning service
Web,DevOps,Our cases
Our case: Marketplace for gaming goods
Web,Outsourcing
Angular 6 Will Be A Hit
Web,Outsourcing
Web App Security 101: Keep Calm and Do Threat Modeling
Web,Mobile,Outsourcing,Other
All You Wanted to Know About Chatbot Platforms
Web
What's New in React 16.3.0 - 16.4.2: Features Overview
Web,Outsourcing
ANGULAR 6 versus REACT 16.3
Other
GDPR: Smart Practices
Web
Fintech Apps - A Lucrative Solution for Customers and Businesses Alike
Other
Swimming with Sharks
Web
Node.js 10.0.0: Everyone’s Favorite Got Even Better
DevOps,Outsourcing
Rancher 2.0: A Quick Look at the New Version
Our cases
How to Save Money Using Your Own Infrastructure
Other
I’m Tired of Blockchain Hype, Are You?
Web,Other
Progressive Web Apps and Why You May Need Them
Other
Don’t Treat Me Like a Fool: The worst thing you can do for your business
Web
Web App Security 101: How to Defend Against a Brute Force Attack
Other
How to Convert Your Business to an Amazon-Style Market Leader
Web,Outsourcing,Other
JavaScript & WebSockets: How to Build Real-Time Applications
Other
Culture eats technology for breakfast
Other
How to Control Agile Development: Progress and Costs
Marketing
Аudience-based Marketing
Other,Marketing
How to Become a Leader in Your Market
Web,Other
SSR or CSR for Progressive Web App
Web,Outsourcing
Angular 6 vs. Ember 3
Other
Scaled Agile: Agile Approaches Extended Beyond The Team Level
DevOps,Other
Security in Kubernetes and How Companies Can Benefit from It
DevOps,Other
DevOps Becomes DevSecOps to Secure Your Application
DevOps
Hashicorp in Kubernetes: The short guide for Consul & Vault
Testing
What Is Quality Assurance and Why You Need It Immediately
Back-end,Amazon Web Services
AWS: Debugging Lambda Functions
Other
The Power of the Holistic Business Analysis
Other
Ember, jQuery, Angular, React, Vue: What to Choose?
DevOps
Kubernetes backup with Heptio Ark
DevOps
What to Choose: NFS or CEPH?
Web,Mobile,Back-end,Amazon Web Services
Serverless Architecture for Modern Apps: Stacks Providers & Caveats
Web,Mobile,Back-end,Amazon Web Services
Why Enterprises Choose Serverless Architecture
DevOps,Amazon Web Services
Kubernetes is at the Forefront of a Secure Microservice Future
DevOps
DevOps: Kubernetes Federation on Google Cloud Platform