THTheAceOfHearts·Dec 29, 2015
Web workers can win you huge performance boosts. In my work we implemented auto-indexing of client-side resources so you can search without lag or hiccups, and we published a library [0] so that others could use it. Pushing stuff as much stuff as you can to web workers is definitely something that needs to get more love.
This isn't a particularly new idea. Here's a short writeup about this in react-future [1]. Roughly one month ago someone published react-worker-dom [2] and wrote a blog post [3] about it.
But this is ultimately just a workaround for terrible DOM APIs. Maybe I've been living under a rock, but I haven't seen any new DOM API proposals to help deal with these problems. The only new DOM API I've heard about is web components, which still runs in the UI thread. Does shadow DOM win us any huge performance boosts?
In the last few
Read the rest
weeks I've looked through the source for a lot of elements in the polymer catalogue [4]. This is probably going to come off as a bit rant-y and negative, and it's totally tangential to the topic, but I'm totally unconvinced that web components are the way forward. These APIs are too complicated and they rely on side-effects which are very difficult to trace and debug. It's code that says: Execute this side-effect and I'm going to hope that now my environment is in an expected state. Oh, you screwed up with a typo? Don't worry, I'll just fail silently, good luck debugging me! You import files and then you pray that it polluted your namespace with the correct globals. This is not an acceptable way for building web apps in 2016.
In contrast, I've been using css-modules [5] for the last few months, and although it has its own shortcomings and problems, I love that it makes it makes your usage very explicit and easy to trace. If you look at the css-modules link, you'll see why it's so great: You're explicitly saying you want to pull in that stylesheet and reference that specific class.
The same goes when you're using React: You import a component and you put it in the render function's return value. If you try rendering something invalid, it'll scream as you. You can debug this much more easily because you know the file that was referenced and the specific export that's being used.
[0] https://treasure-data.github.io/redux-search/
[1] https://github.com/reactjs/react-future/tree/master/05%20-%2...
[2] https://github.com/web-perf/react-worker-dom
[3] http://blog.nparashuram.com/2015/12/react-web-worker-rendere...
[4] https://elements.polymer-project.org/
[5] https://github.com/css-modules/css-modules#css-modules