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.
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
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.
50 - 60% walmart users on mobile
responsiveness here was slow
productivity of engineers was slowing down (java, handlebars, etc)
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
Webpack takes things and turns them into other things. The ‘input’ is the ‘entrypoints’. If you can remember in the graphic of Webpack where it shows modules going into the front, and then compiled assets coming out the other side of Webpack, the modules going in, are the ‘entrypoints’.
Your entrypoints can just be one, as shown as ‘entry.js’ on the getting started page, or they can be many, as shown here:
Electrode is a platform for building universal React/Node.js applications with standardized structure, best practices, and modern technologies baked in. Electrode focuses on performance, component reusability, and simple deployment to multiple cloud providers—so you can focus on what makes your app unique.
From the name, I at first thought this was an Electron platform. But it’s actually a server/client platform built on React and Node.
Interestingly, some of the magic is a custom Wepback loader:
A webpack loader, plugin and library to make NodeJS require work with complex files like images when we are doing server-side rendering.