September 2018 Summaries

Vue London was a successful conference that showcased the growing momentum and enthusiasm for the Vue framework in the development community. The event featured a comprehensive program of content, including talks on various aspects of Vue, such as reactivity, testing, GraphQL, Nuxt, Vuex, accessibility, machine learning, and more. The conference also included workshops, meetups, and lightning talks, providing attendees with numerous opportunities to learn from experts in the field. The event was well-attended and generated a great atmosphere, with many attendees expressing their enthusiasm for Vue and its potential for growth and adoption. The conference marked an exciting time for Vue, as it continues to evolve and improve, with plans for new features and releases announced by Evan You, the creator of Vue. The success of Vue London demonstrates the framework's growing popularity and its potential to become a leading player in the development community.

The Netlify Lambda Vue CLI plugin simplifies the process of working with serverless functions in Vue.js projects by integrating it into the existing developer workflow. The plugin uses the Netlify Lambda CLI tool and a service plugin to build and run serverless functions locally for testing and preparation for deployment, making it easier for developers to start using serverless functions without complicated configurations. The plugin is designed to work seamlessly with the default build and serve commands in Vue CLI, allowing developers to focus on building and deploying their applications with more confidence and clarity.

Jason Lengstorf, a developer advocate for Gatsby, discusses the release of Gatsby v2, which was a long time coming and involved contributions from 315 people over months. He highlights Gatsby's open source strategy, including an open source swag store that shows appreciation for contributors and encourages first-time contributors to get involved. Lengstorf also talks about reducing the barrier between user experience and developer experience by removing the difficulty in implementing UX decisions. He emphasizes GraphQL adoption, accessibility, and the broader React ecosystem, stating that Gatsby is more than just a static site generator but an opinionated framework for building React apps with performance enhancements and predictable workflows. Finally, he defines Developer Experience as making the right thing the easy thing for developers, abstracting away difficult design decisions, and setting smart defaults to produce excellent results.

Service workers are a powerful tool in web development that enable offline-first and performance benefits, but they can also be complex and lead to issues with caching. To solve these problems, developers need to set cache-control headers for their service worker files, which tells the browser to always check for updated versions of the file instead of waiting for the default expiry time. In some cases, passing `updateViaCache: 'none'` when registering a service worker can also help resolve issues with caching.

Netlify's forms feature allows developers to integrate forms into their applications with minimal setup and configuration. By automagically configuring forms to work with serverless functions, developers can take advantage of the power of serverless computing without needing to manage complex workflows or backend configurations. This integration enables developers to collect form data, store it in a database, and trigger actions based on that data, all while leveraging Netlify's seamless deployment and scalability features. By pairing forms with serverless functions, developers can create powerful applications that respond to user input in real-time, providing a seamless and engaging user experience.

In this post, we explore how to build an Express application on top of AWS Lambda functions, all within Netlify. Netlify and AWS Lambda integration allows developers to run arbitrary backend code without leaving the platform. The idea behind Lambda functions is that you pay for what you need and don't have to worry about responding to changes in load to your application. We use serverless-http to translate between Lambda's event object and Express's req and res object, simplifying routing decisions. Using Express in a Lambda function provides benefits such as using favorite Express patterns, existing middleware, and a large ecosystem of ready-to-use components. However, there are considerations for resource limits, including memory and execution time limits, and the need to handle "stateless" runtime, where instances may not be reused across requests. We also discuss connecting to databases and building Express.js apps with Netlify Functions.

Immutability in React is changing, particularly with the introduction of Immer, a library that makes it easy to work with immutable data structures while maintaining interoperability with other libraries. The concept of immutability was first introduced in 2013 with Om and later popularized by Immutable.js in 2015. However, these approaches had limitations, such as interoperability issues with other JavaScript libraries. Immer addresses this issue by providing a more lightweight and simple way to work with immutable data structures, making it easier for developers to adopt and use. The philosophy behind Immer aligns well with React's principles, focusing on temporal mutability, interoperability, and debugging, which enables fine-grained control over the component lifecycle and allows for better debugging and tracing of UI updates. Additionally, Immer has gained a significant following within the React community and is being used in various projects to reduce boilerplate code and improve performance.

The Netlify team has introduced an updated version of their CLI tool, which is now available for installation through npm. The new CLI features a modern JavaScript API and is designed to be more accessible and user-friendly. It includes various commands such as `deploy`, `init`, `link`, and `logout`, allowing users to manage their Netlify sites and workflows more efficiently. The team has also announced plans to expand the CLI's capabilities with community-contributed plugins, improved local development tools, and enhanced logging features. To get started with the new CLI, users can follow the installation instructions and explore the available commands and features.

Netlify Forms is a way to process form submissions without the need to configure a backend, using Netlify's build bots that parse your markup at deploy time and create necessary form handlers and APIs. To integrate Netlify forms into a Vue app, you can add a netlify attribute to the form element, or use a pre-rendered static HTML file in the public folder, or utilize Vue Router with two components for submission success and failure views. The process involves adding form elements, updating data attributes, handling form submissions, and configuring router routes. Netlify Forms provides a way to collect valuable data without the hassle of configuring a backend, making it easier to integrate forms into favorite frameworks.

Netlify, a web development platform, is enthusiastic about open source projects, hosting them on its platform with features such as SSL/HTTPS by default, custom domains, and continuous delivery. The company feels nostalgic about GitHub's ribbons, which were a visual cue inviting users to view source, join projects, or fork them. Netlify has introduced Snippet Injection, allowing users to add GitHub-style ribbons to their sites without modifying the source code, using a feature that can also be used for other purposes like adding analytics providers. The company encourages users to try out different kinds of ribbons and is planning to explore writing a tutorial on creating custom snippets as a Netlify CLI Addon.

At Netlify, we strive to create a good developer experience by making the process of building and deploying sites pleasant and clear. We aim to make this better with each improvement in our admin UI. Our goal is to provide a helpful hand during deployments by relaying information back to developers in the Deploy Logs. We've added features such as reporting successful or failed configurations of custom header rules and mixed content warnings, making it easier for developers to validate their site's configuration. Additionally, we've introduced Deploy Summaries on each new site deploy, providing an easy-to-read summary of the deployment process, including security checks and custom HTTP headers.