- Gatsby Templates + TinaCMS - JAMStack joint event
The first presenter, Jeff Gnatek, will give an overview of what GatsbyJS themes are, how they compare to starters and plugins, what they offer and some use cases in how they are useful in your work.
Jeff (@jeffgnatek) is a Lead Frontend Engineer at ButcherBox.
Our second presenter, Nick DeJesus, will give an overview of using Gatsby themes as a data layer, component shadowing, composing themes, and pragmas.
Nick (@dayhaysoos) is an expert in Residence at Resilient Coders.
Our third presenter, Nolan Phillips, will be giving an overview of an open source React CMS for JAMstack websites called TinaCMS. Devs love the JAMstack but content editors hate headless CMSs. In this talk we take a look at how TinaCMS takes a new approach to content management that provides an amazing experience for developers and content editors alike. Tina is a solution that allows nontechnical content editors to make changes on Gatsby and NextJS sites. It works seamlessly with your existing Git workflow and helps content and development folks work within the same system without stepping on each other's toes.
Nolan (@ncphi) is a developer from Atlantic Canada. He was an early member of Forestry.io where he lead the frontend development
of the Forestry CMS. He is now one of the core maintainers of Forestry's newest projects–TinaCMS–which is a ground up
rethink on how to edit content in the JAMstack.
6:00 - 6:30 Food & Drink
6:30 - 6:45 Opening Remarks
6:45 - 7:05 "An introduction to Gatsby Themes" with Jeff Gnatek
7:05 - 7:25 "The Power of Gatsby Themes" with Nick DeJesus
7:25 - 7:55 "Intro to Tina: A React CMS for JAMstack" with Nolan Phillips
7:55 - 8:00 Closing Remarks
Public transportation is recommended: Orange line to Back Bay or Green line to Copley. There are also limited parking options (http://en.parkopedia.com/parking/back%20bay%20boston/?arriving=201612011900&leaving=201612012100). The Wayfair office is located at 4 Copley Place, above the Copley Place Mall (http://www.simon.com/mall/copley-place/map) (across the bridge from the Prudential Mall).
You will see escalators and a sign for "ELEVATORS" in the center of the Copley Place mall (elevators and escalators are both across from the Barneys New York). After 7pm you may only be able to use the elevators.
Proceed up to the Sky Lobby and check in with security. Please bring a photo ID. Look for friendly Wayfairians near the elevators and escalators to guide you to the meeting space. Once in the sky lobby, take the elevator to the seventh floor where the meetup will be.
- Guided Tour of Hooks, Visual UI Testing
6:30 Pizza, Socializing
# A Guided Tour of React Hooks
Dave Ceddia - Tiny Wins
Hooks offer a simple, concise way to write stateful React components without classes.
In this talk you'll learn about the "magic" behind how Hooks work and get to see a few examples of them in action. We'll cover the big four: useState, useEffect, useReducer, and useContext, plus how to write your very own custom hooks.
You may never want to write a class again.
# Visual UI Testing: Testing the Last Mile
Craig Cavalier - ezCater
Some things can't be easily tested with unit tests and integration tests, and so far too frequently we rely on manual QA to verify visual changes to our applications. With a proliferation of device sizes and browser versions, spot checking changes in the browser is not possible at scale. In this talk, Craig Cavalier explores how visual ui testing can close the testing gap and restore confidence in our ability to make UI changes that work cross-browser.
- Dynamic Forms, React MonoRepos
6:30 Pizza, Socializing
# React Monorepos. - Alistair MacDonald
Using Create React App with Yarn Workspaces to create repositories with multiple React Apps, shared components and Storybooks.
# Dynamic Forms and Form Authoring - Nick Sophinos
The ability to create forms dynamically with a json schema and a forms authoring system will be demonstrated. Also a solid component and code reusability strategy for reuse between React Native and React JS will be demonstrated.
Nick Sophinos is a 20 year full stack software development veteran and creator of the open source WDean Medical Practice Manager.
- Migrating to React, (Lightning Talks)
## Migrating to React: Iteratively Modernizing a Webcast Player Frontend
Gabriel Ricard, a Senior Developer at West Digital Media Solutions, provides an overview of a multi-year project to update a Flash-based webcast player to HTML5. Learn why they eventually chose React for their frontend (and how they convinced management to let them rewrite it), how they gradually migrated their code, problems they encountered along the way and their solutions.
- Bring order to React, Animated WebGL Map Visualizations
⚙️ The Lost Socks of React: Where do I put that Component?
Adam Conrad - Principal UX Engineer
Have you used create-react-app and wondered how you're supposed to turn this into a production-ready app? Have you been tasked with cleaning up a legacy code base and wondered where you put everything? This talk is an attempt to bring order to the chaos and find a scalable architecture that can work for any size application. We'll build an app together and figure out where to put everything.
Adam is a principal UX engineer at Indigo. Previously he worked at Catalant, CoachUp, Draft, Vistaprint and Microsoft.
🗺️Animated Map Visualizations with Deck.gl - Peter Beshai https://twitter.com/pbesh, @cortico, MIT @medialab.
Visualize and animate data with interactive maps powered by http://deck.gl - Uber's WebGL-powered framework for visual exploratory data analysis of large datasets.
Where do we start when we want to visualize data on a map? How far can we take it? In this talk, I'll cover some of the basics of drawing on a Mapbox map with React before moving on to some of the more exciting things you can do when you harness the power of the GPU with the help of http://deck.gl .
- Fun with React Hooks
# Fun with React Hooks - Michael Jackson and Ryan Florence, ReactTraining.com
Michael and Ryan will give a joint presentation covering hooks and some of the concepts from their training-
Deepen your fundamental understanding of React's composition model and dig into some advanced, real-world use cases like animating route transitions, manage data caching, and real-time updates.
We'll also be covering React's latest feature, hooks, in depth. Hooks promise to simplify your React code and make building clean, reusable abstractions easier and faster than ever.
- React Project Night - April
Food and venue sponsored by Education First.
Bring your laptop and get ready for another React Project Night!
Project Night is a great place to:
1) Hack on a project you've already started
2) Start learning React or other parts of the React ecosystem
3) Ask questions or bounce ideas off other developers
4) Network with other developers and see what they're working on
5) Find collaborators for your project
All skill levels are welcome! At the beginning, attendees will have the opportunity to share what they're working on, what they're looking for help with, or what they'd like to help others with. For the remainder of the night, attendees are free to work on their projects, collaborate on troubleshooting issues, or just enjoy the company of the other attendees.
- Make Front-End a first class citizen
# How to make front-end a first class citizen in your organization, Francois Ward/HubSpot
Francois will talk about the challenges people face in those orgs, how important front-end is and all the facets people don't generally think about that makes it hard, and steps people can take to introduce org changes to make it first class.
- Repo Architectures for Sharing Components, Accessibility
We'll be at CloudHealth this month. Security will need *real names* to let people in - edit https://www.meetup.com/account/. If this is an issue for you, email me your real name and I'll fix up the attendee list.
# Repo Architectures for Sharing Components - David Colwell, CloudHealth by VMWare
As UI developers we'll eventually come across situations where we want to break out a specific subset of code we're working with into it's own separate project so it can be shared or worked on as something independent of what we consider the primary app(s) we're working on. This could be as simple as a shared UI component library, more complex such as functional or utility modules we want shared across multiple projects, or could even be simply developer tooling and configuration we want to ensure is consistent across all our active projects. The possibilities go well beyond the standard "UI component library" most might immediately think of when talking about creating shared libraries from part of your app code. That said, it's important to understand the potential value as well as challenges this kind of decision might bring.
In this talk I'll share strategies, patterns, and tools I've seen teams leverage to successfully and effectively do these very kinds of abstractions of code into shared npm packages. We'll cover pros and cons and some of the specific challenges and things to be aware of when you find yourself wanting to work simultaneously across multiple npm projects that compose your primary application(s). I'll share the strategies I've found effective in helping to keep the experience reasonably sane for developers in the teams, and some of the unexpected wins and failures discovered along the way.
# Practical Web Accessibility, Spencer Gregson, WayFair (Confirmed!)
Whether you've only just dipped your toes in Web Accessibility (a11y) or are doing a deep dive into your application's usability, we can always be building a better site. Creating a usable and accessible site is crucial to reaching as much of your audience as possible. We'll be diving into why, how, and where to focus our efforts for the greatest impact.
This is new content for a lot of people! Even if you don't know anything about this "Accessibility" thing – there will be no assumptions of prior experience.
- Building Voice Apps, Typescript & React
Building Voice Apps with the Violet Framework - Vineet Sinh @vineetsinha, Salesforce
The popularity of Amazon's Alexa and Google Home has been inspiring both developers and businesses to think about Voice computing. From a banking assistant on your phone to grocery shopping on your TV - it is truly exciting to see how Voice Interfaces could be used.
In this session we will introduce you to and go over an example application, built using Violet (http://helloviolet.ai/), an Open-Source Node.js based Voice App Framework. Violet simplifies the complexity needed typically when manually building using other developer oriented frameworks, while providing for more flexibility than the drag-and-drop non-technical tools on the market. Violet achieves this using an Html (& React) inspired template driven approach.
TypeScript & React - Chris Toomey @christoomey, Thoughtbot
This talk will provide a brief summary of the world of typed languages, an overview of TypeScript's features, as well as deeper dives into how TypeScript integrates with the world of React.