Prairie.Code() Sessions tagged javascript

Building a UI Component Library with Styled Components

At Hy-Vee, we reached a point where we were spinning up new teams so quickly that we found it difficult to maintain consistency across products. How could we ensure every person created a button that looked and functioned the same way across all digital properties?

Our first step in tackling this problem was having UI/UX define a style guide that all consumers should implement. Ultimately, we found it was hard to regulate consistent output across the organization. We needed a simple approach to ensure adoption of the style guide and a set of shared components consumers could use without having to worry about styling.

That's where our UI component library came into play. I'll talk about how we created it, the benefits you can receive, and how we migrated to using a Monorepo containing a variety of different packages to decrease bundle sizes. These libraries have allowed us to ship code faster and more efficiently as we've scaled.

Some specific technologies used: styled-components (CSS in JS), JavaScript, Lerna, Yarn Workspaces, Babel, Webpack, React.

Speaker

Lee Robinson

Lee Robinson

Senior Software Engineer, E-Commerce, Hy-Vee

React-A-Tron: React on the Desktop

Wouldn't you love to build fast applications for the desktop? If the answer is yes, than look no further than building React apps with Electron. Electron is a framework to build cross-platform applications using tools you already know and love, HTML, CSS, and JavaScript. Chances are you use an Electron app in your daily workflow. Still skeptical? If you use Slack, Atom, or VS Code, you are using Electron. When you pair Electron with React, you can build amazingly fast and robust applications for Windows, Mac, and Linux. In this session, we will walk through how to set up an application using Electron, than we will introduce React and build a small desktop app that looks and feels like a native desktop application.

Speaker

Chris DeMars

Chris DeMars

Front-End Developer, Tuft & Needle

Introduction to Angular 8

Alain Chautard will go through an introduction to the Angular framework. If you don't know anything about Angular, that's a perfect opportunity to learn all of the basics and get you started with the framework and front-end development! Alain will talk about TypeScript, components, services, pipes, and how to work with Angular CLI through live coding.

More specifically, we are going to understand how Angular works and how it runs in a browser. We're also going to talk about Angular CLI, a tool to help scaffold an Angular application.

This workshop will be packed with examples and code labs to help understand how easy it is to write Angular web applications.

Speaker

Alain Chautard

Alain Chautard

Angular Consultant, Angular Training

Introduction to Typescript

JavaScript is the language that enables all of the dynamic aspects of the web, such as real time updates, notifications, as well as more advanced features in the browser. TypeScript, a superset of JavaScript, enables great tooling and better structuring of large JavaScript applications.

In this session, we will cover the next big thing in modern web development: Typescript, which brings types, decorators and many more features on top of what JavaScript already does.

Speaker

Alain Chautard

Alain Chautard

Angular Consultant, Angular Training