The event was JAM-packed with designers, front-end developers, and experts around the JAMStack domain. All conversations were majorly focused on static-site generators and going serverless - how it impacts performance, cost, and business by reducing the infrastructure cost by a great deal. A great venue and welcoming people from the community, made my first experience at JAMStack conf comfortable and enthusiastic.
This being my first-ever JAMStack conf, my focus was more on interacting with people, and getting to know what are the best practices followed across the globe. Coming from Drupal background, it was pretty interesting to see how everyone is using the features of CMS and at the same time leveraging JAMStack for the end-user-facing sites. An amazing time at the conf with a pool of friendly and enthusiastic people, discussing ideas and their pain points.
Sarah Drasner, Netlify: State of the JAMstack Nation
Sarah talked about how JAMStack changes the way we have been traditionally thinking about web apps, servers, infra, and scalability required to handle huge traffic. The talk was followed with a very convincing demo of an e-commerce site hosted statically on Netlify, built using Nuxt with Stripe integration and Lambda functions for functional points. Code reference link: https://github.com/sdras/ecommerce-netlify
Matt Biilmann, Netlify: Netlify pushes analytics tracking live
Nelify CEO Matt Biilmann deployed analytics live tracking with Netlify during the event. This enables faster and more accurate statistics - https://twitter.com/paulmaunders/status/1148896750561873920
Knut Melvær, SanityCMS: Transforming the Json - GROQ (and Sanity CMS)
Previously available within Sanity CMS, GROQ is now open-source. The talk showcased advantages over GraphQL. A detailed article on Sanity CMS Blog - https://www.sanity.io/blog/we-re-open-sourcing-groq-a-query-language-for-json-documents
Ben Edwards, Stack bit
Ben showcased an interesting way of building JAMstack websites in minutes by combining themes, site-generators, and CMS without complex integrations. The project would generate a YML config file which will be processed by an adapter for the CMS(if supported). The adapter also covers REST APIs for the CMS.
Ives van Hoorne, CodeSandbox: Making development more visual
Shared the story of how he started with expensive servers during his college days and scaled things better by using JAMStack. How they moved from 10 users with hosting cost of 100$/month to 100K users with 100$/month. The story highlighted the speed, cost, scalability, and most importantly the offline capabilities.
Vitaly Friedman, Smashing Magazine: Smashing Magazine’s story around moving to JAMStack
With ad-blockers disrupting their business model, they decided on a new model of paid membership. The shift was a complete UX overhaul and the transition also included moving to JAMStack. In turn, the performance peaked at to load time of 1s on slower internet connections. Smashing Magazine is hosted now on Netlify and uses markdown files in Github.
Ramin Bozorgzadeh, WeWork: WeWork’s Journey to JAMstack
Ramin shared his experience around WeWork running on monoliths earlier. Which meant that if one system went down, all would. He also explained how moving to JAMStack not just allowed them to have micro-apps, but at the same time improve performance in all aspects that Google lighthouse performs checks on. Performance is directly proportional to their lead conversions was showcased via A/B tests.
Ramin also talked about their stack being based on Gatsby and how the live preview plugin helps them to preview the content before taking it live.
He concluded the talk with better sleep and vacations after the switch.
Una Kravets, Google: CSS Houdini Today
Things went to the next level and probably the most astonishing talk for me was when Una Kravets displayed the new CSS spec, Houdini. “You can write JS in CSS” - something that blew my mind.
Una talked about low-level browser APIs similar to service workers for CSS. A couple of cool demonstrations around the paint API followed, which seemed pretty impossible with CSS earlier. The talk concluded with a small library demo using features from Houdini built using Gatsby and hosted on Netlify: https://extra-css.netlify.com/.
Simona Cotin, Microsoft: Serverless can do that?!
Simona showcased the capabilities of Serverless in her talk. The talk revolved around evolution from web-servers to serverless: with initial servers in facilities, then in VPS and now we don’t need to manage anything. Just write our functions and the service takes care of the rest. With pay-per-use, the cost reduces immensely now, given that we are not paying for the entire web server now. This makes computing super cheap. Simona exemplified it with the use case of Squarespace where they needed 20k for 2 servers initially and still were not able to cater to huge traffic. Today, with a shift to serverless, the same cost would serve the traffic of almost 1 million requests for free, 2 million would cost ~5$ a month which is equivalent to a Starbucks coffee.
The talk answered What, Why, and How around serverless with really good and real examples.
Jake Archibald and Surma: Google Setting up a static render in 30 mins.
Jake Archibald and Surma rocked the stage with an interesting demo around reducing the TTI for an application from ~12s to 2s. The application demo involved optimizing an app similar to Minesweeper under 2G and 3G network loads. They explained how simple and important it is to write a plugin in Rollup, rather than relying on huge plugins, in cases where you don’t need a lot of features from those plugins. Optimizations during the demo included the following:
- Load visible elements first and things like animations could be loaded later making sure users don’t see a blank screen for a very long time.
- Made use of Preact which is a much smaller library compared to React.
- Optimize web font size by using google web fonts and trim their size down by only including the characters needed by the app. This trick helps reduce font-file size from 10 kb to a few bytes: https://fonts.googleapis.com/css?family=Literata&text=ABCD
- Multiple gzip compressions. Use Brotli as compression in place of gzip.
Code for the app is available here: https://github.com/GoogleChromeLabs/proxx
Thanks to the amazing organizing team who put together the event and the sponsors for making this event successful. Overall the event was a great learning activity for me. Meeting people and hearing from them about practices and tools used while going serverless, building rich static websites. Many experiences were gathered which I would like to take back to implementation now. Facing a problem and want to discuss why/why not around static site generators? Feel free to drop in a comment below.