React Design Best Practices

By Josh Taylor and Jeremy Zerr

Doing contract software for a living, we have created many React web apps and our experiences have uncovered some best practices that we use to guide each React project we do. We want to share these best practices, the why behind them, and some of the lessons learned along the way. We are also hoping to get some feedback from other React devs to learn about any best practices we haven't thought about.

Here is a link to the Meetup event and here is a link to the presentation slides which we also turned into a blog post on React Design Best Practices.


Using D3.js with React

By Jeremy Zerr

After covering the basics of D3.js in a previous talk during the same meeting, "Intro to D3.js", we will explore design considerations when integrating charts into your web app with a modern frontend JS framework, specifically React. Important topics to cover include integrating D3.js into React components and handling updates to data in Redux.

Here is a link to the Meetup event, another link to the presentation slides in PDF form, and finally the link to the Github repo Zerrtech/react-d3-zerrtech.


Intro to D3.js

By Andrew Chumich

D3.js has changed the way that charts are built on the web with it's standards-focused approach using SVG, CSS, JS to give you lots of control over what you create. We will introduce you to creating data driven web apps first without a framework like Angular or React to focus on D3.js core features.

Here is a link to the Meetup event, another link to the presentation slides in PDF form, and finally the link to the Github repo andrewchumich/d3-zerrtech.


Adventures of a Freelancer

By Jeremy Zerr

If you have aspirations of being a freelance software developer, learn from my experiences of running my own freelance business over the last 9 years. I will share things that worked, things that didn't, what tools I use, how to market yourself, how to pick technologies to focus on, how to manage projects, and many other things that most don't think of when jumping into the freelance lifestyle.

Here is the link to the presentation


Angular vs. React - Framework Deathmatch

By Jeremy Zerr

Tabs vs. Spaces. Vi vs. Emacs. Angular vs. React.

All arguments we have when among friends (the nerdy ones).  We will be covering modern Angular 4 vs. React, framework battle to the death.

As a part of my consulting work, we have gotten a chance to build with both frameworks on various types of projects, and would like to share our view of both.  We will compare two identical web apps coded with each to show real, working code comparisons.  We will show how to use each with redux, webpack, command line tools, debugging, routing, TypeScript, to show you what is possible with each.  We will also classify which types of apps/products may fit better with one or the other to help with any upcoming projects.

I gave this presentation to the Boise Frontend Developers meetup, and here is a link to the presentation.


Web Apps that Work Offline and Sync using React, Redux, and PouchDB

By Jeremy Zerr

I gave a presentation at the Boise Frontend Developers meetup in April 2017 about web apps that work offline and sync using React, Redux, and PouchDB.

Here is a brief description:

We design our web apps and mobile apps differently.  We almost always need to design mobile apps to work offline.  Yet, we rarely think of our web apps working offline.  This leads to multiple code bases that handle state differently and work differently for users.  Adding offline capability to a web app becomes a gigantic effort and not feasible.  The sync process between multiple devices on multiple platforms is not easy either.  I propose a straightforward open source solution with React + Redux using PouchDB/CouchDB.  Full sample code and ready to use off the shelf libraries will be demonstrated.

Here are the slides for the presentation.

A link to the Github repo at jrzerr/react-redux-pouchdb


Angular 2 with ngrx/store

By Jeremy Zerr

We've recently been working on a couple different Angular 2 projects using ngrx/store, a way to design your app with a central store for all of your app state similar to Redux.  To share some of our experiences, I gave a presentation at the Boise Frontend Development meetup in September 2016.

Here is a link to the Angular 2 ngrx/store presentation slides and the Github repo demo branch.


State of Angular

By Jeremy Zerr and Andrew Chumich

In June 2016, Andrew Chumich and I gave a presentation on the State of Angular at the Boise Frontend Development meetup.  Covers our observations from ng-conf 2016 and some of the exciting features we learned about, and new projects in the Angular ecosystem that are going to be significant.

Some of our favorite new Angular 2 features are:

  • ability to control the View Encapsulation of a component, allowing you to use Shadow DOM to encapsulate styles, or use the default emulated mode to accomplish the same without Shadow DOM by compiling your styles/template differently
  • RxJS brings full-featured Observables into Angular 2, which is an alternative to using Promises and will enable optimized change detection for components

A couple of our favorite new projects in the Angular 2 ecosystem are:

  • NativeScript - using the same general techniques as React Native to have the possibility of creating hybrid mobile apps using Javascript but using Native UI components
  • Angular CLI - a command line interface for Angular 2 to launch new projects and add parts

Here is a link to our State of Angular presentation


AngularJS Component Refactoring

By Jeremy Zerr

With all the talk about Components being the future of the web, and frameworks like React and Angular 2 using them so prominently, why do we have to wait? Why can't we start refactoring our Angular 1.x apps right now to use the new design practices in these up an coming frameworks? Well, we can take some baby steps towards refactoring our Angular 1.x apps to take advantage of a Component-like design.

Angular 1.5 adds a logical next step for us to get to a component based design, and even closer to making an upgrade to Angular 2 much easier.  Angular 1.5 also adds a one way databinding type.

I gave a presentation about this topic in two parts at the Boise Frontend Development meetup in February and then again in March of 2016. You can get the updated slides here.

The presentation has links to three separate code demos, all hosted on Plunker.