9 ms·
WalmartLabs open sources the application platform that powers Walmart.com
- kevan 10y agoClarifying because I was confused at first: this is the React/Node.js tech stack that the website is built on, not the ecommerce platform that drives it.
- cygned 10y agoYeah, I was hoping to see some very cool Clojure code.
- sdegutis 10y agohttp://www.electrode.io/index.html http://www.electrode.io/index.html > "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." Sounds like the missing piece of the puzzle everyone's been waiting for?
- groundhogday1 10y agoIsn't this what Rails did/does?
- tracker1 10y agoRails will load the above the fold content and render server-side, while allowing the rest to render client-side, do component level render caching on the server, and allow for client and server rendering with one codebase?
- tracker1 10y agoThe complexity isn't likely completely free.. but could be incredibly useful for a lot of universal rendering scenarios... the above the fold content loading, and the component render caching server-side is particularly interesting. Now if Walmart.com just didn't look quite so hideous... but that's another issue... The tech stack for electrode is definitely interesting, and looking forward to playing around with it.
- alexgrigoryan 10y agoI hope you like it! I personally think that the above the fold content, server side caching, and redux-router-engine will make a positive impact on the server side rendering react community. We saw HUGE gains in performance using these. We are working on a blog post that goes through the performance numbers we saw on the live site. I also think Electrode Explorer will be popular for bigger companies that have many components. http://www.electrode.io/docs/electrode_explorer.html http://www.electrode.io/docs/electrode_explorer.html P.S. I'm from the Electrode team.
- tracker1 10y agoThanks for the reply, yeah, from what I've read and seen so far it definitely looks interesting... And seems to resolve a lot of the issues I had very early on with ismorphic^wuniversal rendering back when Yahoo's fluxible app had just come out. The render caching seems very cool as well, making up for the general double-render for fetching data triggered from the component. Right now at the day job I'm stuck in angular 1.x hell, though my contract is up in a couple weeks and looking for something in the React space again. Too much angular work in Phoenix to avoid completely though. Aside: wish I could get a hold of a hiring manager there if you have space for new people, have never even gotten a callback from walmart labs, and would love to work for your org.
- alexgrigoryan 10y agoYour contact information is in your HN profile, I'll have our recruiters ping you with the opportunities we have available @WalmartLabs.
- dcgudeman 10y agoI have tried on multiple occasions to get started with react and every time the large amount of setup prevents me from getting anywhere useful. After looking over the docs I am somewhat hopeful that this might bridge the gap.
- jimmyhmiller 10y ago[Create React App](https://github.com/facebookincubator/create-react-app/blob/master/README.md https://github.com/facebookincubator/create-react-app/blob/m...) simplifies setup greatly. I'd really recommend giving it Ila try.
- WalterSear 10y agohttps://github.com/Jon-Biz/simple-static-react https://github.com/Jon-Biz/simple-static-react >The intention is to provide a basic boilerplate setup that doesnt inundate the new user with complexity, and stays out of the way of the more comfortable who just want an ES6/React environment to bang out an idea. It's ready to set up on your plain old web server, or your Firebase or Github site, or for building the front-end for your Wordpress API, with a minimum of fuss and configuration. There are flavours that get you a simple router, a firebase backend, and Virtual Reality bindings, if you need those.
- alexgrigoryan 10y agoHope you find the docs useful. We try to walk through building an app together. We are working on breaking down everything inside our app for people who are starting off can get a jumping start, but than read through everything that's inside the app to understand better what's happening underneath the hood (such as, what's in the webpack config).
- acemarke 10y agoI second the recommendation for Create-React-App. It's explicitly intended to be a no-config, no-setup, Just Start Writing Code tool with a great developer experience. Also, I keep a big list of links to high-quality tutorials, articles, and resources for React and related topics, at https://github.com/markerikson/react-redux-links https://github.com/markerikson/react-redux-links . It's a great starting point for anyone trying to learn the ecosystem.
- simlevesque 10y agoI use Hapi.JS everyday and it's a bliss. Will check this out.
- dahdum 10y agoLooks like it's based off Hapi for the server component too. Hapi has been a dream to use, and this looks pretty well documented too.
- igravious 10y ago(Seems Hapi.js is built in?) http://www.electrode.io/docs/what_is_electrode.html#features http://www.electrode.io/docs/what_is_electrode.html#features Electrode Boilerplate comes fully loaded with the best technologies available: • React is an awesome JavaScript library for building user interfaces, created by Facebook. • Redux a predictable state container for JavaScript apps. #game-changer. • React Router is a powerful routing library built on top of React. • CSS Modules a CSS file in which all class names and animation names are scoped locally by default. Fixes the problem of the global scope in CSS. #winning • Universal rendering built in. • Webpack a powerful module bundler. • Webpack Isomorphic Loader a powerful tool that makes NodeJS require understand files such as images for SSR. • Babel transpiles ES6 + 7. • ESLint a pluggable linting utility for Javascript. • Mocha a feature-rich Javascript testing framework. • Enzyme a Javascript testing utility for React, created by airbnb. • TravisCI a continuous integration service to build and test software projects. • Gulp a Javascript build tool that lets us automate tasks. • Yeoman a Scaffolding tool for modern webapps. • History a Javascript library for managing session history. • Bluebird a great Javascript promise library. • Electrode Confippet Confippet is a versatile and flexible utility for managing configurations of Node.js applications. • Electrode JWT CSRF Cross-Site Request Forgery (CSRF) protection with JWT. • Electrode-Redux-Router-Engine An Electrode routing and rendering engine using react-router and redux. • Component Caching Optimize React SSR with profiling and component caching. • Electrode-Server A configurable web server using Hapi.js on top of Node.js. • Electrify Tool for analyzing the module tree of webpack projects. • Electrode-Docgen A custom metadata extractor for the Electrode framework, automates component documentation.
- smaili 10y agotldr - http://www.electrode.io http://www.electrode.io
- danso 10y agoGiven Walmart's deep contributions and investments in the Backbone ecosystem [0], which were impressive in their own right, I'm even more impressed that they seem to have switched to a React-based front end stack in a few years. That seems pretty agile for a company the size of Walmart. [0] https://github.com/walmartlabs/thorax https://github.com/walmartlabs/thorax
- alexgrigoryan 10y agoThe switch of creating this platform, changing the walmart.com tech stack, and open sourcing it is less than a year :). Has been a wild ride!
- tluyben2 10y agoAlthough it is great that this happened and I applaud open source contributions, especially by bigger companies, I wonder what the reasons for such a rewrite were. And why the online platform manager approved it. People often try to convince me of shiny-new-thing-39432 and sometimes we try on a non-risk project and usually we find out it's the same or (more often) worse than what we used before. I like React and theoretically (not practically unfortunately) also Node but if I already have a site built in something else the web team would have to come up with really over the top reasons (and prove them after the roll out!) to just dump that investment.
- woah 10y agoProbably a total redesign.
- exogen 10y agoIn fact design-wise, the React-powered site is identical to the previous one.
- alexgrigoryan 10y agoGreat question, we definitely took a hard look on if we should transform our tech stack or not (and decided to do it) - to really answer this question though, you would need to understand our previous stack, what was holding us back, and where we wanted to go. I'm not sure if reading about our previous stack and why we moved is an interesting blog post or not :).
- crudbug 10y agoWhat are the server memory consumption numbers for this ? How is this different from Hypernova [0] ? [0] https://github.com/airbnb/hypernova https://github.com/airbnb/hypernova
- alexgrigoryan 10y agoMy blog post that talks more about the release: https://medium.com/walmartlabs/introducing-electrode-an-open-source-release-from-walmartlabs-14b836135319#.5j415go54 https://medium.com/walmartlabs/introducing-electrode-an-open...
- apike 10y agoA lot of folks have debated whether there is a need or a place for a "Rails for Node" platform that brings together a set of blessed libraries that work well together and a set of tools for rapidly building software with that set of tools. In that sense at least, Electrode seems to have some structural similarities to Rails. Do you see Electron as potentially having a Rails-like role of bringing together libraries and packages into a more "plug and play" development environment for people who want buy in to comprehensive Node development platform?
- alexgrigoryan 10y agoInternally, we do have a set of blessed libraries to keep the site and teams unified. To ensure we don't go stale, we usually have a team or so experimenting with something that we can bring into "Electrode Core". Externally, for the "Electrode Core", we will continue to maintain a set of libraries that play well together, but I expect to see people doing their own thing. I see what we are doing with core as more of a jumping off point for your app and setting you on the right path for managing many apps/components (with our notion of archetypes that manage your dependencies instead of top level app) and than people will mix technologies that they want. We will continue to maintain our list though and manage dependencies through archetype (I think archetype is a powerful idea). "Electrode Modules and Electrode Tools" are independent to the rest of Electrode. You can use these modules/tools independently of Electrode Core.
- marccantwell 10y agoI'll grant this is a subtle point, but why did you choose to use the word "archetype", borrowing a term to describe what most understand to be generated boilerplate code? Why not call it a framework, or an app generator? Why did you, collectively I will assume, choose to assign a new term to an existing concept?
- giardini 10y agoMy experience is that Walmart's website is truly abysmally poor. Releasing their software is likely a scourge upon other commercial vendors who might inadvertently try to imitate them.
- hackerboos 10y agoPrices take longer than the rest of the page to show up and occasionally you will get a Price: [NaN]
- heroprotagonist 10y agoThis is somewhat surprising, in a good way. A lot of large companies are pretty risk averse, and this prevents them from releasing the source for their shopping platforms into the wild. I'm sure there are some differences between the open source version and what they actually run. Is this the complete platform? What's held back? I would think the analytic tools for usage and sales, how they store user data, and perhaps whatever they use to build profiles about individual users' shopping behavior. But that's just speculation.
- alexgrigoryan 10y agoElectrode is just the front end platform. We also have OneOps for our app server lifecycle management. Test Armada for automation. I don't know of anything lower in the stack that was open sourced than what I mentioned. The stuff we didn't put into the Electrode platform that is integrated internally, off the top of my head: 1. Integrations to our global config manager, that allows us to turn flags on/off in real time. 2. Integrations to our A/B Testing Tools 3. Integrations to our content management 4. Logging/Analytics/Metrics Integrations 5. Our CSS styles and Icons As you can see, almost everything is open sourced :)
- plan6 10y agoTo any Walmart developers reading: thank you for open sourcing this! However, there's something I'd like even more than your time spent on this project. Currently, walmart.com will indicate to customers that there is inventory available in-store that there sometimes isn't. This can lead to a terrible customer experience when you order something that runs out of stock after you order it, and your order is just cancelled. It seems like there should be the ability to have it backordered at the price at which you purchased. Could Walmart instead always honor the price at which an item was purchased online even if stock in-store runs out, and give the customer the option to cancel the order or get a 20% discount on any item if you don't want to get it on backorder? Right now this can be done, but it requires the store manager's approval, which can involve having to file a complaint, which seems completely unnecessary.
- ryanmccullagh 10y agoFor what it's worth, the walmart.com websites takes forever to load (> 10 seconds) on my single core laptop in Firefox. edit: I should also state that my OS is Ubuntu.
- makmanalp 10y agoSame here, 10ish on OSX with Chrome.
- jameskegel 10y agoAntergos, i7, chrome, 6 seconds. I'm not thrilled, but I applaud them making a step forward for the community.
- leesalminen 10y agoDOMContentLoaded: 1.48s document.ready: 1.88s MBP Mid 2014, OSX 10.11, Chrome 53
- deleted 10y ago[deleted]
- swlkr 10y agoIt loads pretty quickly on my iPhone, about 1 second.
- exogen 10y agoCheck out the network timeline, this because there are images loading and analytics events firing. Totally independent of whatever front-end framework is used; even the most efficient vanilla JS won't speed up image loading...
- Negative1 10y agoCurious; is this stuff being developed at the location out in San Bruno (in front of Youtube)?
- alexgrigoryan 10y agoThe Application Platform team (folks who created Electrode) is mostly based in the Sunnyvale office.
- cutler 10y agoWhat happened to Clojure? I thought Walmart Labs was one of Clojure's flagships.
- projectileboy 10y agoClojure is used at Walmart Labs, but Walmart Labs is pretty big - there's a lot going on, and a lot of different tech.
- deleted 10y ago[deleted]
- marccantwell 10y agoArchetypes? Gulp? Welcome to the age of vapidity, where Meaning is pastoral and abstraction sacred.
- exogen 10y agoIronic given that your comment is the most vapid in this entire thread.
- marccantwell 10y agoCompletely valid. I should have been more direct, but that wasn't the intent. Since you took the bait, I take issue with the seemingly flipant manner in which words are assigned new meanings, and existing concepts are relabeled. While the concept of archetypes is intellectually really fun to consider, it makes more difficult the ultimate project of speaking a common tongue. This is not an orthodox point of view, this is primarily economical. Far too much cognitive effort is required to learn new paradigms that turn out to be fresh takes on old ones, so best to identify them early and move on. But we should be critical as a community to self-regulate, as the marginal utility of each moment of learning is weighed against a million other potentialities.
- alexgrigoryan 10y agoHappy to receive feedback, do you have suggestions on what we should call it?
- marccantwell 10y agoYou might do just fine substituting archetype with template. The readme for https://github.com/electrode-io/electrode-archetype-react-app https://github.com/electrode-io/electrode-archetype-react-ap... reads: "This "app archetype" provides for common patterns across all app projects so that each app project can standardize on common development behavior and patterns. Its essentially pre-made patterns for build scripts." "A pre-made pattern" sounds a lot like a template. The majority of the documentation focuses on applied concepts, with familiar terms. The only reference to archetypes is found in the first paragraph of What is Electrode, and I think it distracts and confuses more than it helps. If it is a core concept, then it might be good to link to https://github.com/FormidableLabs/builder https://github.com/FormidableLabs/builder, but I don't yet see where or if builder is included as part of electrode.
- debacle 10y agoVery cool. I've watched a few of the videos that the Walmart guys did on various topics (really scaling, RUM, etc) and they clearly know their stuff.
- leesalminen 10y agoI just tried out the Electrify [0] package on my codebase. It visualizes your webpack output. Very helpful! [0] https://github.com/electrode-io/electrode-electrify https://github.com/electrode-io/electrode-electrify