Angular vs. React - Framework Deathmatch

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, here is a PDF of the slides.

Web apps that work offline and sync using React, Redux, and PouchDB

I gave a presentation at the Boise Frontend Developers meetup this evening 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

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.

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

State of Angular Presentation

This past week, 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

Boise Code Camp 2016 Presentations

This year at Boise Code Camp I am presenting on a couple different topics.

One is on AngularJS Fundamentals, get the slides.

I discuss the fundamentals of creating web applications with AngularJS 1.x, covering topics of modeling your data, creating templates, designing directives, all work included Plunker code samples for you to run and try out.  Also includes strengths and weaknesses of Angular, comparisons to React and Angular 2, and what kind of software you can build with Angular.  Here is a link to this presentation on the Boise Code Camp Lanyrd site.

My second talk is Adventures of a Freelance Software Developer, get the slides here with no presenter notes, and here with presenter notes.

If you have aspirations of being a freelance software developer, come learn from my experiences of running my own freelance business over the last 7 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 a link to the presentation on the Boise Code Camp Lanyrd site.

Hope to see you all at the awesome event!

Addition to AngularJS Component Refactoring Presentation

After creating my initial AngularJS Component Refactoring presentation, which explained how to refactor your Angular 1.x apps to use component-based design, there were some new developments in Angular that fit nicely as a next step. Angular 1.5 was released, which added a component function that is basically a more simple form of a directive like we refactored to in the presentation.

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, but it doesn't work exactly like I hoped, I covered that in the updated presentation, too.

I updated my slides that I used during the presentation at the March Boise Frontend Developers Meetup.

AngularJS 1.x Component-based Design

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.

I gave a presentation about this topic at the Boise Frontend Development meetup in February.  You can get the slides here.

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

React + Redux Design Lessons Presentation at Boise Frontend Development Meetup

To gain more experience building with React + Redux, we are building a time tracking web app based on the TSheets API and sharing our experiences with our developer community here in Boise.

We have built other TSheets API apps in AngularJS as a part of paid client work that we do at Zerrtech, which is Andrew Chumich and I, Jeremy Zerr.  Given that experience, building something similar to a previous project in another framework is be a great way for us to compare AngularJS to React + Redux.

Ultimately, we hope to understand those critical differences and similarities between the frameworks and approaches to designing web applications.  It will make us better advisors and more well-rounded front end developers.  Every framework we work with, and every project we complete, helps us reach these goals.

We decided that it could be beneficial to others if we shared this process with our fellow colleagues in the community.  We presented a few design lessons we learned at the Boise Frontend Development Meetup.  We hope to follow up soon with more lessons learned.  All of the source code is released on Github.  Here are the links to the materials from the presentation:

React + Redux Design Lessons Learned

PDF Slides

Github repository react-redux-tsheets-app

If you have any challenging projects that you need some contract help on, and like to work with people who are passionate about what they do, we would love to hear from you, reach out to me on LinkedIn.

AngularJS Guest Lecture at Boise State University

It's never too early to learn AngularJS. I am giving an AngularJS guest lecture at Boise State University for the Enterprise Web Development class

The link to the slides used in my presentation is here.


AngularJS Promises Presentation and Demo Code

I made a promise to present about AngularJS promises to our Boise AngularJS Meetup, and I resolved that promise. (sorry for the bad attempt at programmer humor)

Here is a link to the presentation slides as a PDF.

Included in the presentation were three separate Plunkers showing different variations of implementing an Image Preloader to show how to use several features of AngularJS promises.



Subscribe to Front page feed