Active
Ingredients
Javascript
APIs
Markup
Front-end
Web
CDNs

A New Web Development Conference

What are the active ingredients of modern web workflows in 2017?

What’s the best way of getting from design to production?

What are the best practices for making Progressive Web Apps, Serverless APIs, and the rest of the JAMstack?

Spend a day learning from some of the most prominent people in web development. Go through best practices, inside advice, and great case studies on modern stacks.

NEWSLETTER

To stay up to date on Active Ingredients: Web, leave your email below.

Thanks, we'll be in touch soon!

SPEAKERS

Amjad Masad
Core team, Babel & React Native at Facebook. Founder of Replit.
Amjad Masad
Brian Douglas
Frontend Developer & Advocate at Netlify. Host of JAMstack Radio podcast.
Brian Douglas
Daniel Brain
Lead Engineer for PayPal Checkout, maintainer of XComponent.
Daniel Brain
Diana Mounter
Design Systems Lead at GitHub. Organizer of NYC Design Systems Coalition. Previously at Etsy.
Diana Mounter
Emily Hayman
UX-focused developer and Solutions Engineer at Algolia.
Emily Hayman
Erin McKean
Developer Evangelist, LoopBack/Node, IBM. Founder of Wordnik.
Erin McKean
Frances Berriman
Freelance designer & engineer. Previously at Code for America, UK Gov't Digital Service, BBC
Frances Berriman
Jonas Helfer
Open source developer for Apollo at Meteor Development Group
Jonas Helfer
Matt Biilmann
Co-Founder, Netlify. Previously founded Webpop & BitBalloon.
Matt Biilmann
Preethi Kasireddy
Co-founder and Lead engineer at Sapien.ai. Previously at Andreessen Horowitz, Coinbase, and Goldman Sachs
Preethi Kasireddy
Wilson Miner
Digital designer in SF. Previously a designer at Facebook, Apple, Rdio and Everyblock and contributor to Django.
Wilson Miner

PAST TALKS

The Rise of the JAMstack
Matt Biilmann

The emergence of Git centered workflows, around modern build tools, static site generators, and modern browsers, have changed the way most front-enders work.

Matt Biilmann will cover how a new stack is emerging and how this will change how web sites and web apps are built in the future.

Why Use Static Types In JavaScript?
Preethi Kasireddy

Many developers have come to love JavaScript for its dynamic typing (the ability of the interpreter to deduce type and type conversions). This feature makes the language incredibly flexible and easy to work with. More importantly, it speeds up development time. However, we’ve recently seen tools in the ecosystem (e.g. Flow.js, TypeScript) that bring the concept of static types to JavaScript. What are static types? Isn’t the point of JavaScript to be dynamically-typed? Why would we use them? When would we not want to use them?

In this talk, we’ll discuss what static types are and look at real-world examples of JavaScript code with static types. As we go through each example, we’ll examine some of the benefits that come with static types, including:

  • Helping detect errors early
  • Serving as documentation
  • Separating data from behavior
  • Eliminating entire categories of bugs (e.g. Type errors at run time, null exceptions, etc)
  • Allowing us to refactor with greater confidence
  • Serving as a domain modeling tool

…as well as some tradeoffs like verbosity, upfront investment to learn, and more.

Building Towards a Holistic Development Service
Amjad Masad

We as developers tend to separate our development tools by the stage of the development lifecycle: authoring, executing, building, or deployment. But this limits how much information each tool has at it’s disposal and therefore how much utility it can provide. For example, your IDE can show you the callers of a particular function but because it it’s not involved in running your code it can’t tell you how many times that function failed at runtime. Even worse, we end up with a lot of redundant implementations of the same functions – for example parsers – because it’s easier than sharing the work.

At Replit we’re growing a holistic development service from the ground up. At first our service just executed user code. Then it gained code intelligence capabilities like Lint. Then it understood the project structure and dependencies. Then it knew how to test code. And now it’s growing to understand deployment. All this within a single service. We envision this to become a long-lived always-on service that understands your code in all it’s stages and can be at your disposal anywhere you are regardless of the device, platform or the programming language you’re using.

Cross-Domain Components with React and XComponent, at PayPal
Daniel Brain

PayPal is going all-in with cross-domain components. Using React and XComponent, we’re opening the door for merchants to plug our components directly into their shopping experiences. We’ve open-sourced XComponent to let anyone build their own cross-domain components, and release the power of Node and React to third-party sites. This talk will cover:

  • Using Node, React and XComponent to build drop-in cross-domain components
  • Leveraging iframes to share web-apps as first-class React components, with props and callbacks
  • Exposing PayPal’s Button and Checkout experiences as cross-domain components
  • How you can build your own components with React and XComponent
Panel: A Modern Web Landscape

Moderator Jessica Parsons chats with web innovators Wilson Miner, Frances Berriman, and Matt Biilmann about best practices, current trends, and future possiblities in modern web development.

You Need An API: Now What?
Erin McKean

Even if you’ve done your best to keep your site completely “JAMmy”, the day may come when you need an API of your very own. If you love consuming APIs more than creating them, the open-source LoopBack framework is the API tool for you! LoopBack (based on ExpressJS) makes creating APIs as easy as “add database and stir” while also being extremely flexible and extensible.

With LoopBack you can:

  • Connect easily to popular datastores, including Postgres, Mongo, ElasticSearch, MySQL, and more
  • Create a full CRUD API just by defining a model
  • Create straightforward authentication with a built-in User model & Passport
  • Automatically generate an OpenAPI spec for documentation and codegen
  • Add custom methods, boot scripts, mixins, and more!

In this talk you’ll see just how easy it is to create an API with Loopback, and you’ll also get a quick overview of the additional features that make LoopBack a great tool to simplify the scutwork of creating an API so that you can get to the fun part: delivering data and functionality to your users!

Frontend for the Serverless stack
Brian Douglas

Finding a modern toolset to create truly fast, secure and dynamic sites has been an endless search. With JavaScript, Lambda, and Markup, we have just that. A static website is fast and secure by nature and no longer limited because of the word “static.” 90% of the features that once required a custom backend can now be done entirely on the front-end through JavaScript, APIs, and external services. And that missing 10% can be functions provided by services like Lambda and Azure.

With a modern web development approach is there even a need for servers? I answer that question by exploring the implementation of server-less functions into your front end web app and explaining the benefits of server-less project, which includes speed, cost, and security. By the end of this talk you will have a good understanding to build a fasts, secure front-end that talks to a low cost and maintenance server-less architecture.

Performant Web Animations: Achieving 60fps by Emily Hayman
Emily Hayman

Achieving a silky smooth user experience has become a requirement in today’s web. We’ll discuss the pros and cons of imperative versus declarative animations, as well as composite properties versus layout and paint properties. We will explore how existing standards like requestAnimationFrame and CSS hardware acceleration can improve performance, in addition to upcoming standards like CSS containment. Finally, we’ll review tools for testing animations.

Solving the Data-Loading Problem with Apollo + GraphQL
Jonas Helfer

React, Angular & friends make it easy to build reusable frontend components, but it’s up to the developer to figure out how to load data into the UI and keep it synchronized with the backend. Apollo Client is an Open Source GraphQL client built to solve that very problem. It lets you

  • Write maintainable code by separating presentation from data loading
  • Declaratively attach data to components (sideways data loading)
  • Automatically guarantee UI consistency with a normalized store
  • Keep your UI up to date with polling and subscriptions
  • Implement Optimistic UI and SSR with a few lines of code Solving the data loading problem with Apollo + GraphQL

TECHNOLOGIES DISCUSSED

COMPANIES PRESENTING

NEWSLETTER

To stay up to date on Active Ingredients: Web, leave your email below.

Thanks, we'll be in touch soon!

SUPPORTERS