Online Resource

Online Resource

Benard, Bonnie, author

On today's episode, Aimee and Chuck welcome Maximillian "Max" Stoiber to the show. Max hails from Austria and is an expert in open source development at Think Mill. Tune in to JSJ 245 Styled Components and React-Boilerplate with Max Stoiber.

JSJ 269 Reusable React and JavaScript Components with Cory House

On today’s episode of JavaScript Jabber, we have panelists Joe Eames, Aimee Knight, Charles Max Wood, and playing the part of both host and guest, Cory House. Encourage your team to investigate reusable components, whether that’d be React, Angular, Vue, or Ember. Tune in!

[00:01:35] – Overview

We can finally write reusable components that it is really lightweight. It doesn’t take much framework-specific code to get things done.

Around 3 years ago, the idea of web component standard was all front-end developers could share our components with each other whether someone is in Angular or React. Web components continue to be an interesting standard but people continue to reach for JavaScript libraries instead – React, Angular, Vue. 

[00:04:50] – Browser support issue

The story in JavaScript libraries is easier. You have more power, more flexibility, more choices, and get superior performance, in certain cases, by choosing a JavaScript library over the standard right now. If you try to use the web components standard, you have to Polyfill-in some features so you can run things across browser. You also won’t get JavaScript features like intelligently splitting bundles and lazy load different components.

Whether you’re in Angular or React, you have this model of putting your data in your curly braces. That setup is non-existent in standardized web components. You have to play the game of putting and pulling data into and out the DOM using DOM selectors. You actually take a step backward in developer ergonomics when you choose to leverage the platform instead.

[00:07:50] – Polymer

The reason that Polymer is useful is it adds some goodness on top of web components. One of those things is that it makes it easier to bind in data and not having to do things like writing a DOM query to be able to get your hands on this div and put this text inside of it. With Polymer, you can do something that feels more like Angular, where you can put in your curly braces and just bind in some data into that place. Polymer ends up adding some nice syntactic sugar on top of the web components standard just to make it easier to create web components. Polymer is also used to bundle in Polyfill for the features across browser.   

[00:14:20] – Standards are dead

No. The standard itself has been embraced at different levels by different libraries. What you can see for the near future is popular libraries leveraging pieces of the web components platform to do things in a standard-spaced way. Effectively, Angular, Vue, Aurelia, are going to be abstractions over the web components standard. Arguably the most popular way to do components today is React. But React completely ignores the web components standard. When you look at React, you can’t see what piece of the web components standard would fundamentally make React a better component library.

Cory can’t seem to run to anybody that is actually using the standard in production to build real applications. People continue to reach for the popular JavaScript libraries that we so often hear about.

[00:17:05] – Libraries making reusable components

There is a risk that it would have been a waste for people writing components on Angular, for React, for Vue. But it’s not necessarily safer writing on the web component standard when you have so few people leveraging that standard. There’s always the risk that that standard may shift as well.

As an example, Cory’s team created approximately 100 reusable components in React. If they end up moving to a hot new library, the components are really just functions that take parameters and contain HTML. There is little there

[00:21:20] – Why opt for reusable components

Reusable components are inherently useful in a situation where you’re going to be doing something more than once. If you think about any work that you do as a software developer, we’d like to think that we’re coming in and creating new things but often it is groundhogs day. There are all sorts of opportunities for reuse.

As a company, we want to encapsulate our forms in reusable components so it’s literally impossible for our software developers to do something that goes against our standard. That’s the power of reusable components.  

[00:31:20] – Rigid component vs. flexible component

As component developers, if we try to create a reusable component in a vacuum, bad things happen. If you’re going to do a reusable component, start by solving a specific problem on a given application. If we think that a component’s going to be useful in multiple places, we put it in a folder called reusable right there in our application source folder.

We try to follow that rule of three as well. If we’ve taken that component and used it in 3 places, that’s a good sign that we should extract it out, put it in our NPM package, that way, everybody has this centralized component to utilize. At that point, it has been tested. It’s been through the fire. People have used it in the real world in a few places so we can be confident that the API is truly flexible enough.

Be as rigid as you can upfront. Once you add features, it’s really hard to take features away. But it’s quite easy to add features later. If you start with something rigid, it’s easier to understand. It’s easier to maintain and you can always add a few more switches later.

[00:36:00] – Reusable components

The reason that we can’t reuse code is every time a new project comes up, people are spending up their own ideas rather than leveraging standards that should have been put in place previously.

We’ve had the technical ability to do this for a long time. We just haven’t been around long enough for consolidation to happen, for standardization to happen. You look at how quickly things are changing in our industry. For instance, a couple of years ago, everybody had pretty much decided that two-way binding was the way to build web applications. And then, React came along and shook that up. So today, you have different ways of thinking about that issue.

[00:42:45] – Component development on teams

Aimee’s team has component development and they’re using Angular 1.6. All of our base components are sitting in a seed application. We just go in when we want to create a new property and we just extend all of those components with specific functionalities that we need.

[00:47:45] – Mobile to web crossover

Cory’s team is creating React components but it’s not leveraged on a mobile application. But people use React Native components on the web. And in fact, if you use create-react-app today, you can do that right now. It’s wired up to work in React Native components. In that way, you can literally have these same components running on your Native mobile apps as you do on your web application.

[00:50:00] – Challenge

Cory’s challenge for everybody listening is sit down with your team and have a quick conversation about whether you think components make sense. Look back at the last few months of development and say, "if we have a reusable component library, what would be in it? How often have we found ourselves copying and pasting code between different projects? How much benefit would we get out of this story?"

Once you’ve realized the benefits of the component model, both in the way that makes you think about your application, in a way that it helps you move faster and faster over time, I really think you won’t go back to the old model. I’d encourage people to investigate reusable components, whether that’d be React, Angular, Vue or Ember.

Picks

Cory House

• Creating Reusable React Components on Pluralsight
• Ted Talk: Why You Should Define your Fears Instead of Your Goals by Tim Ferriss

Joe Eames

• UI-Router
• Persistence

Aimee Knight

• Ask HN: People who completed a boot camp 3+ years ago, what are you doing now?
• NgAtlanta

Charles Max Wood

• Upwork.com

JSJ 269 Reusable React and JavaScript Components with Cory House

On today’s episode of JavaScript Jabber, we have panelists Joe Eames, Aimee Knight, Charles Max Wood, and playing the part of both host and guest, Cory House. Encourage your team to investigate reusable components, whether that’d be React, Angular, Vue, or Ember. Tune in!

[00:01:35] – Overview

We can finally write reusable components that it is really lightweight. It doesn’t take much framework-specific code to get things done.

Around 3 years ago, the idea of web component standard was all front-end developers could share our components with each other whether someone is in Angular or React. Web components continue to be an interesting standard but people continue to reach for JavaScript libraries instead – React, Angular, Vue. 

[00:04:50] – Browser support issue

The story in JavaScript libraries is easier. You have more power, more flexibility, more choices, and get superior performance, in certain cases, by choosing a JavaScript library over the standard right now. If you try to use the web components standard, you have to Polyfill-in some features so you can run things across browser. You also won’t get JavaScript features like intelligently splitting bundles and lazy load different components.

Whether you’re in Angular or React, you have this model of putting your data in your curly braces. That setup is non-existent in standardized web components. You have to play the game of putting and pulling data into and out the DOM using DOM selectors. You actually take a step backward in developer ergonomics when you choose to leverage the platform instead.

[00:07:50] – Polymer

The reason that Polymer is useful is it adds some goodness on top of web components. One of those things is that it makes it easier to bind in data and not having to do things like writing a DOM query to be able to get your hands on this div and put this text inside of it. With Polymer, you can do something that feels more like Angular, where you can put in your curly braces and just bind in some data into that place. Polymer ends up adding some nice syntactic sugar on top of the web components standard just to make it easier to create web components. Polymer is also used to bundle in Polyfill for the features across browser.   

[00:14:20] – Standards are dead

No. The standard itself has been embraced at different levels by different libraries. What you can see for the near future is popular libraries leveraging pieces of the web components platform to do things in a standard-spaced way. Effectively, Angular, Vue, Aurelia, are going to be abstractions over the web components standard. Arguably the most popular way to do components today is React. But React completely ignores the web components standard. When you look at React, you can’t see what piece of the web components standard would fundamentally make React a better component library.

Cory can’t seem to run to anybody that is actually using the standard in production to build real applications. People continue to reach for the popular JavaScript libraries that we so often hear about.

[00:17:05] – Libraries making reusable components

There is a risk that it would have been a waste for people writing components on Angular, for React, for Vue. But it’s not necessarily safer writing on the web component standard when you have so few people leveraging that standard. There’s always the risk that that standard may shift as well.

As an example, Cory’s team created approximately 100 reusable components in React. If they end up moving to a hot new library, the components are really just functions that take parameters and contain HTML. There is little there

[00:21:20] – Why opt for reusable components

Reusable components are inherently useful in a situation where you’re going to be doing something more than once. If you think about any work that you do as a software developer, we’d like to think that we’re coming in and creating new things but often it is groundhogs day. There are all sorts of opportunities for reuse.

As a company, we want to encapsulate our forms in reusable components so it’s literally impossible for our software developers to do something that goes against our standard. That’s the power of reusable components.  

[00:31:20] – Rigid component vs. flexible component

As component developers, if we try to create a reusable component in a vacuum, bad things happen. If you’re going to do a reusable component, start by solving a specific problem on a given application. If we think that a component’s going to be useful in multiple places, we put it in a folder called reusable right there in our application source folder.

We try to follow that rule of three as well. If we’ve taken that component and used it in 3 places, that’s a good sign that we should extract it out, put it in our NPM package, that way, everybody has this centralized component to utilize. At that point, it has been tested. It’s been through the fire. People have used it in the real world in a few places so we can be confident that the API is truly flexible enough.

Be as rigid as you can upfront. Once you add features, it’s really hard to take features away. But it’s quite easy to add features later. If you start with something rigid, it’s easier to understand. It’s easier to maintain and you can always add a few more switches later.

[00:36:00] – Reusable components

The reason that we can’t reuse code is every time a new project comes up, people are spending up their own ideas rather than leveraging standards that should have been put in place previously.

We’ve had the technical ability to do this for a long time. We just haven’t been around long enough for consolidation to happen, for standardization to happen. You look at how quickly things are changing in our industry. For instance, a couple of years ago, everybody had pretty much decided that two-way binding was the way to build web applications. And then, React came along and shook that up. So today, you have different ways of thinking about that issue.

[00:42:45] – Component development on teams

Aimee’s team has component development and they’re using Angular 1.6. All of our base components are sitting in a seed application. We just go in when we want to create a new property and we just extend all of those components with specific functionalities that we need.

[00:47:45] – Mobile to web crossover

Cory’s team is creating React components but it’s not leveraged on a mobile application. But people use React Native components on the web. And in fact, if you use create-react-app today, you can do that right now. It’s wired up to work in React Native components. In that way, you can literally have these same components running on your Native mobile apps as you do on your web application.

[00:50:00] – Challenge

Cory’s challenge for everybody listening is sit down with your team and have a quick conversation about whether you think components make sense. Look back at the last few months of development and say, "if we have a reusable component library, what would be in it? How often have we found ourselves copying and pasting code between different projects? How much benefit would we get out of this story?"

Once you’ve realized the benefits of the component model, both in the way that makes you think about your application, in a way that it helps you move faster and faster over time, I really think you won’t go back to the old model. I’d encourage people to investigate reusable components, whether that’d be React, Angular, Vue or Ember.

Picks

Cory House

• Creating Reusable React Components on Pluralsight
• Ted Talk: Why You Should Define your Fears Instead of Your Goals by Tim Ferriss

Joe Eames

• UI-Router
• Persistence

Aimee Knight

• Ask HN: People who completed a boot camp 3+ years ago, what are you doing now?
• NgAtlanta

Charles Max Wood

• Upwork.com

Panel:

• Charles Max Wood
• Aimee Knight
• Chris Ferdinandi
• Joe Eames

Special Guest: Heydon Pickering

In this episode, the panel talks with Heydon Pickering who is a designer and writer. The panel and the guest talk about his new book, which is centered on the topic of today’s show: inclusive components. Check out Heydon’s Twitter, Website, GitHub, and Mastodon social accounts to learn more about him. To purchase the book – go here!

Show Topics:

0:00 – Advertisement: KENDO UI

0:38 – Chuck: Aimee, Chris, Joe, and myself – we are today’s panel. My show the DevRev is available online to check it out.

1:30 – Guest: Plain ice cream would be frozen milk and that would be terrible. So I am lemon and candy JavaScript!

2:13 – Chuck: We are talking today about...?

2:22 – Chris: He’s talking about “inclusive components” today!

2:41 – Guest: Traveling is very stressful and I wanted something to do on the plane. I’ve done this book, “Inclusive Design Patterns.”

If you don’t want to buy the book you can go to the blog. I have been talking with Smashing Magazine.

5:40 – Panel.

5:47 – Guest: I approached Smashing Magazine initially. They didn’t think there was a market for this content at the time. They were very supportive but we will do it as an eBook so our costs our down. At the time, the editor came back and said that: “it was quite good!” We skimmed it but came back to it now and now the content was more relevant in their eyes. I didn’t want to do the same book but I wanted to do it around “patterns.” Rewriting components is what I do all the time. I use Vanilla JavaScript. Backbone.js is the trendy one.

9:52 – Panel: The hard book did it get published?

10:02 – Guest: We are in the works and it’s all in the final stages right now. It has to go through a different process for the print version.

11:54 – Panel.

11:58 – (Guest continues about the editorial process.)

12:09 – Panel: They probably switched to TFS – it’s Microsoft’s.

12:23 – Guest: There was this argument on Twitter about the different processors.

13:35 – Chris: What are the ways that people are breaking accessibility with their code through JavaScript? 

13:59 – Guest: The whole premise is that there aren’t a ton of different components that we use. Generally, speaking. Most things we do through JavaScript – it’s just different ways of doing this/that, and hiding things. I am discounting things with Node or other stuff. Most of what we are doing, with interactive design, is showing and hiding.

18:37 – Chris: I have some specialty friends where they tell me where I’ve screwed up my code. For example Eric Bailey and Scott O’Hara but, of course, in very kind ways. What are some things that I can make sure that my code is going to work for many different people.

19:18 – Guest: You have accessibility and inclusive design. People think of accessibility as a check-list and that’s okay but there could be problems with this.

26:00 – Panel: That’s a great guideline.

26:05 – Chris: You talked about ARIA roles and it can be confusing. One side is: I don’t know when to use these and the other side is: I don’t know when NOT to use these so I’m going to use them for EVERYTHING! I guess both can be detrimental. What’s your advice on this topic?

27:00 – Guest: Scott is great and I would trust him to the end of the Earth about what he says.

Guest mentions Léonie Watson and her talks about this topic.

29:26 – (Guest continues.)

29:36 – Advertisement – Sentry.io

30:31 – Chris.

30:40 – Guest: There is a lot of pressure, though, right? People wouldn’t blog about this if it wasn’t worthwhile. It doesn’t matter what the style is or what the syntax is.

The guest talks about not throwing ARIA onto everything.

36:34 – Aimee: Is this something that was mentioned in the book: people with disabilities and accessibility.

37:28 – Guest: Yes, of course. I think it’s important to make your interfaces flexible and robust to think and include people with disabilities.

39:00 – Guest mentions larger buttons.

40:52 – Panelists and Guest talk back-and-forth.

42:22 – Chris: It’s an accessibility and inclusivity element. I saw a dropdown menu and worked great on certain devices but not others. I could beat this horse all day long but the whole: what happens of the JavaScript file doesn’t load or just accordion options?

43:50 – Guest: It’s the progressive enhancement element.

44:05 – Guest: I think it’s worth noting. I think these things dovetail really nicely.

46:29 – Chris: Did you do a video interview, Aimee, talking about CSS? Is CSS better than JavaScript in some ways I don’t know if this is related or not?

47:03 – Aimee: When I talk about JavaScript vs. CSS...the browser optimizes those.

47:27 – Aimee: But as someone who loves JavaScript...and then some very talented people taught me that you have to find the right tool for the job.

47:29 – Guest: I am the other way around – interesting.

52:50 – Chuck: Picks!

52:55 – Advertisement – Get A Coder Job!

END – Advertisement: CacheFly!

Links:

• JavaScript
• Backbone.js
• Microsoft’s TFS
• Léonie Watson
• React
• Elixir
• Ember.js
• Vue
• GO
• jQuery
• Node.js
• Puppeteer
• Cypress
• Heydon’s GitHub
• Heydon’s Mastodon
• Heydon’s Book
• Medium Article on Heydon
• Heydon’s Website
• Heydon’s Twitter

Sponsors:

• DevLifts
• Kendo UI
• Sentry
• CacheFly

Picks:

Joe

• Chris Ferdinandi's Blog
• Luxur board game
• Cypress.io

Aimee

• Blog about interviewing
• Birthday Cake Quest Bar

Chris

• Web Dev Career Guide: https://gomakethings.com/career-guide/
• Use FREECAREER at checkout to get it for free
• Neapolitan Ice Cream 
• Netflix Web Performance case study

Charles

• Disney Heroes Battle Mode
• MFCEO Project Podcast
• Gary Lee Audio Experience
• Suggestions for JavaScript Jabber

Heydon

• Bruck
• What is Mastodon and why should I use it?

In this episode of JavaScript Jabber the panelists and guest delve into the advantages of the shadow dom, transitioning from polymer js polyfills to native web components when moving for SAP UI to UI5, which works within React, Vue, Angular, and others.

Panel

• AJ O’Neal
• Aimee Knight
• Steve Edwards
• Dan Shappir

Guest

• Peter Müßig
• Follow Peter on Twitter > @pmuessig, Github

Sponsors

• Taiko, free and open source browser test automation

____________________________________________________________

"The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today!

____________________________________________________________

Links

• OpenUI5
• Home - SAPUI5 SDK

Picks

AJ O’Neal:

• Vinyl Clocks
• Acrylic Stand
• AJ's YouTube Channel (AMA)

Aimee Knight

• Announcing Div Ops as the Slack and Reddit communities

Steve Edwards

• Today on Pearls Before Swine - Comics by Stephan Pastis

Dan Shappir

• The Wixing Street Interview | Facts about Wixing in Germany
• Wix.com werbung | versuch nicht zu lachen
• UI5 Web Components

Peter Müßig

• JavaScript Jabber

Follow JavaScript Jabber on Twitter > @JSJabber

Online Resource

I’m working on a project at Twitter that uses React and webpack. After a few conversations with @sokra last year, this is the setup I put in place for testing React components (authored using JSX and ES6) using Karma.

Dependencies

You’ll need to install various packages. It looks like a lot of dependencies, but all the non-Karma packages will be necessary for general module bundling during development.

Full set of required packages:

• babel-core: to transform JSX and transpile ES6.
• babel-loader: webpack loader for Babel.
• karma: the test runner.
• karma-chai-plugins: assertion library (or your library of choice).
• karma-chrome-launcher: Chrome browser launcher.
• karma-cli: CLI tool for Karma.
• karma-mocha: adapter for the Mocha testing framework.
• karma-sourcemap-loader: sourcemap loader.
• karma-webpack: to use webpack with Karma.
• react
• webpack: module bundler

webpack entry file

If you use webpack-specific features in your modules (e.g., loaders, plugins) you will need to use webpack to build a test bundle. The fastest and simplest approach is to create a single, test-specific entry file.

Create a file named tests.bundle.js. Within this file, you create a webpack context to match all the files that conform to a naming pattern – in this case *.spec.js(x).

var context = require.context('.', true, /.+.spec.jsx?$/);
context.keys().forEach(context);
module.exports = context;

Next, you point Karma to this file.

Karma config

Karma is configured using a karma.conf.js file. The browsers, plugins, and frameworks are specified in the standard way.

Point Karma at the tests.bundle.js file, and run it through the relevant preprocessor plugins (see example below).

The karma-webpack plugin relies on 2 custom properties of the Karma config: webpack and webpackMiddleware. The value of the former must be a webpack config object.

module.exports = function (config) {
  config.set({
    browsers: [ 'Chrome' ],
    // karma only needs to know about the test bundle
    files: [
      'tests.bundle.js'
    ],
    frameworks: [ 'chai', 'mocha' ],
    plugins: [
      'karma-chrome-launcher',
      'karma-chai',
      'karma-mocha',
      'karma-sourcemap-loader',
      'karma-webpack',
    ],
    // run the bundle through the webpack and sourcemap plugins
    preprocessors: {
      'tests.bundle.js': [ 'webpack', 'sourcemap' ]
    },
    reporters: [ 'dots' ],
    singleRun: true,
    // webpack config object
    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          {
            exclude: /node_modules/,
            loader: 'babel-loader,
            test: /.jsx?$/
          }
        ],
      }
    },
    webpackMiddleware: {
      noInfo: true,
    }
  });
};

Rather than duplicating your webpack config, you can require it in the Karma config file and override the devtool value to get sourcemaps working.

var webpackConfig = require('./webpack.config');
webpackConfig.devtool = 'inline-source-map';

module.exports = function (config) {
  config.set({
    ...
    webpack: webpackConfig
  });
};

That’s all you need to do to configure Karma to use webpack to load your JSX, ES6 React components.

Nieder, Rolf, author

Online Resource

Barker Library - TK7872.D48 E54 2019

Online Resource