Five Frontend Things Friday #1

Here are five things in the Frontend Engineering world, that I found interesting…

  1. Prepack - Partial evaluator for JavaScript - From Facebook, a tool for making JavaScript code run faster (early still, not for use in production).

  2. Yes, React is taking over front-end development. The question is why. - Gives a fairly good explanation for this in the beginning, then gives code examples.

  3. Preact.js - Fast 3kB alternative to React with the same ES6 API. If you’re looking for a VDOM implementation without all the abstraction, you must try this out. Been using it for a year or so, and have had many successes.

  4. Javascript Is a Buffet, Not the Enemy - Chris Heilmann - Must see if you’re just getting into JS dev, or you’ve been doing it for 15 years. I think this puts the current ecosystem in the correct light.

  5. Getting started with CSS Grid Layout - Nice list of resources for this new kind of layout system in CSS, that started six years ago as a proposal, and now has landed in latest major browser versions.

Keep Rising,

Kevin B. Ridgway


Like this list? Want to get it in your inbox? Sign up for newsletter!

A Podcast

Two ideas smashed together for me recently. One is that The Rise of Frontend Engineering needs a podcast. And second, that I should do the first episode on something I use daily - Chrome Dev Tools.

Credit goes to Justin Jackson of MegaMaker.co. On his latest podcast episode, he talked about how he started the podcast. It clicked for me, I had started a podcast some time ago, that was put on hiatus when my wife and I had our first child. And when Justin talked about his podcast, it made me think, that I know how to do that, and I bet I could get The Rise of Frontend Engineering’s up pretty quickly (30 minutes). I was partly right! (4 hours). So thanks to Justin for the inspiration.

The second thing was that I recently posted a long answer on Stackoverflow about how to use Chrome Dev Tools. I thought, this is something I use every day, and is an invaluable tool for me. I have a lot of experience with it, why don’t I share some of that knowledge? Made perfect sense to do it here.

Check out the first episode of The Rise of Frontend Engineering Podcast

S01E01 - Chrome Dev Tools

A short stroll through Chrome Dev Tools.

Show Notes

Dev Chrome Tools

Disclaimer: Chrome 58 is the version of Chrome/Dev Tools I used when doing this episode. If you are on the stable version of chrome - it’s updated roughly every two-three weeks for minor releases, and every 6 weeks for major releases. So ye be warned, what I may say, where things may be, etc, could change if you’re listening tooth’s in the future.

What is Chrome dev tools?

How do I access it?

  • Select More Tools > Developer Tools from Chrome’s Main Menu.
  • Right-click a page element and select Inspect.
  • Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).

Getting Started

Three dots vertically stacked on top of each other.

  • Click on this menu and hover over the three icons that are shown to the right of ‘Dock side’.
  • Choose your poison, personal preference
  • sometimes choose right side, when going into device emulating for example, some people choose the pop out window

Elements

Right click select ‘inspect’

  • Styles panel (double click, and change any value).
  • Computed panel, (double click on the box model picture where there are values, you can change these!)
    • First thing at the top is a visual representation of the box model of the element you selected.
    • You can edit all the values around the box model!
  • Below the box model visual, is a list of the actual computed CSS properties, meaning after all the applied styles, these are the ones that ‘won’, and are applied to the element after the cascade.
    • You can click the ‘Show all’ checkbox, and it will even show you the browser-specific styles applied to the element in question. Meaning you can see what you may need to override to get the styles you want for that element.

Console

  • You can just start typing JS functions, things in global scope are here, and can be called
  • If jQuery is on the page you’re inspecting, for example, you can type $(‘selector’) and it will show that element in the console
  • Hit enter to do command
  • Multi line script you’re typing in? Hit shift+enter to go down a line, but not execute what you already typed in.
  • You are running in the context of the page of you’re on.
    • Type ‘document.body’ hit enter…it’s the html of the page, hover over things here in the console, and see those highlighted on the page
    • You can do things to the webpage here
    • document.body.style = ‘background: yellow’; will show the background of the page you’re looking at with yellow
  • Refresh the page, things are lost, if you’re saving/running things here.

Sources

Where JavaScript can be debugged.

Command or Control P to open file. Any file loaded on the page, image, JS, font, video.

Left panel organized by domain, with the top one being the page you’re looking at in the browser.

  • Next things might be extensions you have loaded in chrome
  • The domain at the top is what your current page is, the other domains below are what assets that may have been included on this page from other domains such as google analytics for example.
  • Can click through folder/file hierarchy here.
  • You can edit this files in place (refresh will blow your changes away), and save them if you choose.

Find a CSS file, click on it. is it all on one line?

  • Click on the curly braces in the lower left hand corner, pretty formatted for you!

You should follow @theriseoffee on Twitter.
Download MP3 (14.6MB)

Webpack: What are Webpack Outputs?

I wrote about what entrypoints are in Webpack. Now let’s talk about outputs of Webpack!

Here is the simplest part of a Webpack config that is only one output:

1
2
3
4
//webpack.config.js
output: {
filename: 'bundle.js'
}

This is the simplest of outputs; it’s one static name. There are other options that are dynamic that we can talk about in another post. You can read further about output, in the documentation site.

Outputs are simply the static assets that Webpack spits out after processing. These are the things that the browser will load when you link to them in your project. In this case, just one JavaScript file would be loaded in the browser called ‘bundle.js’.

Spike - Static Site Generator

From Spike’s homepage:

Spike is a next-generation static site generator. It is built on top of webpack, and a foundation of html, css, and js parsers that accept plugins to transform the output. It’s fast, actively developed, and very data-friendly.

Read as, new static site generator based on Webpack, Babel, PostCSS, and Reshape. Seems like a toolset I would like.

I’ve never heard of Reshape before. Seems new. Git commit messages say, Aug 9, 2016 was first commit.

How to Accelerate Digital Transformation: @WalmartLab’s Migrated to React and Nodejs in Less Than a Year / Alex Grigoryan

This is a summary of Alex Grigoryan’s talk from @WalmartLabs, at Nodevember 2016.


The story of how @WalmartLabs successfully migrated to React and Nodejs with efficiency and speed. At the end of this talk, you should be able to make your own successful strategy to transform your technology stack quickly and successfully.

What does a migration mean?

  • FE apps take about 10,000/rps
  • 400 engineers
  • 2 dozen apps comprise @walmartlabs
  • 70% of Walmart.com traffic is on React and Node
  • Next year samsclub.com traffic will be on Electrode too

Took less than a year for them to migrate.

Why migrate?

  • 50 - 60% walmart users on mobile
  • responsiveness here was slow
  • productivity of engineers was slowing down (java, handlebars, etc)
  • Performance, Productivity, Reusability, Responsiveness
  • multiple components being rebuilt
  • services are similar, multiple ecommerce sites (react component model helped here)
  • Use 500 different React components

How did we start?

  • Built the Electrode platform first: http://www.electrode.io/
  • Built the platform team first, small, cohesive, and versatile (full stack)
  • while simultaneously building organizational alignment - met with leaders, set realistic expectations, talked through concerns
    • anxiousness can spread through organization quickly; talk to leaders thougout the org, and talk through why it’s happening; make sure the business side is onboard and understands why
  • with some headway into the platform, we then built the vertical team: senior, bought in, vocal, distributed
    • distributed in terms of organization location
    • this team will be your future ambassadors
  • next we united the Platform and Vertical teams
  • Now you needed to decide on the first application to migrate: not too simple or complex, not business critical, server side render, bought in
  • we chose the ‘collections application’, choose collections of things
    • once we hose collections and started building, there was a constant feedback loop, to refine the platform and process
    • the application went live (about a month)
    • we continually monitored and fine-tuned: performance, conversion, scalability, reusability
  • Next Application? Walmart.com Checkout: client-side rendered, complex, single page application, business critical
  • Rinse and repeat
  • Finally, all the other applications start migrating (search, login, my account, profile pages)
    • This is where the ambassadors Play a Key Role
    • the small team is protected, and you don’t get crushed by requests from the organization; this larger vertical team can help with that (every single team has a person there with deep knowledge of the system)
  • currently onboarding Samsclube.com

What are the benefits we’re seeing?

  • impact on customer experience:
    • 90% functional automation
    • 40% reduction in bundle size
    • 60% improvement in response time
  • impact on developer productivity
    • 3x faster from code to production
    • Training days down from 5 days to 1 day
    • First commit from 7 days to 1
    • Improved talent recruiting
  • these kinds of things, changes the culture of the company

Electrode Focuses on Three Things - http://www.electrode.io/

  • getting you up and running quickly
  • making your server side render fast
  • enabling you to reuse across multiple applications