Participating in meetups and conferences is often the pinnacle of being part of a developer community and a great way to stay up to date with the latest technologies. This is where the everyday effort to expand our knowledge and share it culminates, as all mega-minds meet and indulge in deep technical dives and ice-cold beer. In our case, we build a platform through which users can easily create their own stunning websites, and by doing so we face major technological challenges - so we have lots of valuable knowledge and insights to share with the community.
“Front-end Platform Builders” is a series of meetups we’ve launched, that addressed many of the aspects related to front-end development we deal with: from creating a reusable UI, using libraries such as Mobx and Redux in large platform projects, scalable components and performance to data-driven development. This series of meetups, already includes five open sessions that took place in Tel-Aviv, Be’er Sheva and in Vilnius. Stay tuned here for more great meetups: TLV, Kyiv, Dnipro and Vilnius
So, here’s a small taste of some of what we talked about:
ReactJS code reuse patterns - Duplicated code? No soup for you!
// Guy Romm
When new functionality affects multiple areas of the app, you have to avoid code duplication. In his talk, Guy shares his insights on many ways to reuse code in ReactJS and demonstrates scenarios where these methods suit best.
Firstly, Guy examines simple dynamic composition, where the enhanced functionality is created dynamically at the render stage. Next, he moves to render callback aka children as function, where a dynamic wrapper generates the added functionality and invokes the children function with the enhancements. This allows passing dynamic props from the wrapper to the enhanced component during render, which is not supported with simple composition.
Finally, Guy discusses the high-order component (HOC) -- a static solution where the enhanced functionality is created upon class generation rather than upon render. When you need to access the lifecycle of the enhanced component, or you want a static enhancement (re-packaging for example), HOC is the solution.
The choice between static and dynamic composition depends on who is responsible for adding the enhanced functionality, and Guy uses a simple yet beautiful demo with react-table and react-tags to explain this.
Watch:
Redux is hard to TDD and Mobx lacks structure? Meet Remx!
// Yedidya Kennard (yedidyak)
While Redux and Mobx are awesome state management libraries they do have some shortcomings. What if we could create a variant that combines the advantages of both and resolves their drawbacks? This is exactly what Yedidya and his team have been doing with Remx, a homegrown state management solution for React. Among other advantages, Remx is well structured with a clear component hierarchy, unlike Mobx, and supports multiple stores and TDD, unlike Redux.
But all those goodies don’t make Remx hard to use or take their toll on performance. With only four functions based on Mobx infrastructure, it is easy to master and provides the same performance as Mobx. In the video Yedidya further explores the various features of Remx and uses the classic TODO app to demonstrate them in comparison with the other libraries.
Watch:
Improving load time for over 100 million websites
// Dan Shappir (DanShappir)
A talk that starts with “one way to become famous is to break production” has got to be a good one, and Dan indeed rocks. Improving performance for so many websites with such a huge variety is a mammoth task, and if you’re good at it you won’t easily get yourself fired, even if you break production after only three months in the company.
With over 1,000 developers working on the Wix platform, production state changes every two minutes or so. Such frequent modifications mandate rigorous performance tracking and constant load time improvement by Dan’s team. How can we tell what the targets are for such a task? While there are industry standards like Google’s RAIL for example, with specifications such as loading first contentful paint in up to one second, there is no substitute for a hands-on product manager that explicitly puts performance requirements in the spec.
Improving performance has lots of different angles and methods, like bundling and unbundling that were combined at Wix into smart bundling using code splitting and saved up to 25% of load time. Additional methods include caching, resource hints and ETag hashes, selective download and rendering optimization like server-side rendering (SSR). Many of those, as well as other optimization methods discussed in the video, can improve load time by dozens of percentages and accumulate to a significant boost in performance. If optimization is relevant to your project follow Dan’s exploration of the different methods to find the ones that could work best for you.
Dan has also talked about performance in our latest Facebook Live event. You can watch it here.
React and Redux rendering on steroids
// Rokas Mikalkevičius
In this eye-opening presentation, Rokas explains how to detect and fix redundant renderings, which can easily turn an otherwise perfect UI into a sluggish one. Rokas details considerate container architecture and smart caching -- the two key techniques that help optimize UI performance.
After explaining the default behavior, and the ways to tune it for better performance, Rokas then puts it all together in a live demo, which implements the techniques and shows how to use Chrome’s built-in profiling tools throughout the process. As redundant renderings and reconciliations are eliminated, the optimization leads to a staggering acceleration by a factor of four.
Rendering on steroids – checked!
Those were four sample sessions from our “Front-end Platform Builders” meetup series that discuss some of the challenges handled by the Wix Engineering. If any of those talks has piqued your interest, and you want more - feel free to follow us on Twitter, Facebook and YouTube.
For more engineering updates and insights:
Visit us on GitHub
Subscribe to our YouTube channel