3 ms·

This article echoes my experience this year and last, moving from a Backbone app into React + Fluxxor, and eventually into ES6 with Babel + Flow + Webpack. It'

by STRML 11y ago

This article echoes my experience this year and last, moving from a Backbone app into React + Fluxxor, and eventually into ES6 with Babel + Flow + Webpack. It's a huge pain to configure and understand all this tooling, but man is it nice once it's all working. It definitely gives me hope for the web as an application platform. Re: Flow, it's good but nowhere near as developed as TypeScript, but it's getting better. 0.22 of Flow (released just a week ago) brought massive speed improvements that bring it decently on par with any other linter. I found I could finally re-enable it in Sublime Text after this release. It catches all kinds of things linters won't, and the upstart cost is relatively low. On the other hand, TS has the benefit of years of type files available for almost any library; don't underestimate how great that is. Using React has been great as well. It's what I wish Backbone views had been from the beginning. We certainly aren't wanting for choice. Between the dozens of Flux implementations, React alternatives like Mithril, interesting languages like ClojureScript (with Om if you want to keep using React) or Elm, multiple typing systems, and even WASM on the horizon - web development is an exciting field. It's also overwhelming, and I say that as someone who keeps his head in it over 12 hours a day. --- Re: CSS, the story still feels incomplete. I want a way to write a library that will effortlessly import its own styles, so consumers can simply import the component and go to town. Most solutions are severely limited, slow, or both, mostly because they rely on inline styles. Nothing's wrong with inline styles, until you want to do :hover, :active, pseudo elements or the like. See the React material-ui project for a very real example of how this can go wrong - note how every component has a dozen or more extension points for styles. I built a project with this recently and it was intensely frustrating that I couldn't simply add some CSS to the app to fix styles across the board - I needed to keep a giant file of extensions and be sure to apply them every time I used a component. And, of course, component authors can't possibly anticipate every possible use, so some of my selectors were ugly "div > div > ul > li:first-child" monstrosities. CSJS (https://github.com/rtsao/csjs https://github.com/rtsao/csjs) is one of the few solutions I like. I would be very happy to see it, or something like it, go mainstream.

nzonbi 11y ago
Polymer (https://www.polymer-project.org https://www.polymer-project.org) is a solution for the styles problem. You can pack each component with its own styles, complete with all its functionality. This allows for a very clean separation of concerns among components. Better than all other libraries that I have tried. I hope that web components take off, because it is a great way to build apps. Currently they are only supported in Chrome. Moving data between components in Polymer, can be done with data binding. The bad thing is that it could get messy for complex applications. Is not terribly bad, but it could be better. What Polymer needs is a better way to move data between components. If that problem is solved, Polymer would be an excellent alternative to create any kind of apps.
- STRML 11y ago
  Yeah, I had good fun building a Polymer frontend for my weekend project, Secureshare. I got around some of the data binding shortfalls with polymer-signals. It's been probably 2 years since I did it, so I'm sure there are better solutions - but I liked it as a dev environment. It's somewhat opaque, though. https://github.com/STRML/securesha.re-client/tree/master/polymer/app/elements https://github.com/STRML/securesha.re-client/tree/master/pol...
- spankalee 11y ago
  Note that style scoping comes with Shadow DOM, so once browsers support that (it's happening now), you can get scoping with no libraries. Polymer also adds a CSS custom properties polyfill and a CSS mixins (@apply) polyfill. Custom properties are implemented in FF and Chrome already, @apply is being worked on in Chrome. Polymer always tries to be forward compatible with actual web standards, one of it's main benefits :) Eventually Polymer will mostly be just templating and convenience helpers on top of native standards.
dinkumthinkum 11y ago
Does all that really give you hope for the web as an application platform? I feel like there is an obvious kind of joke in so many discussions of front-end web programming tools. It is boarding on like a farce or satire of some kind ... Every comment is has a different litany of obscure libraries and frameworks and combinations that sound like a set of random dictionary words with just a few common threads "react, react, blah blah." It doesn't seem like "pace of technology change" and it certainly doesn't inspire the idea of relative maturity of the web as an app platform .... it seems like a comedy.
- STRML 11y ago
  It does give me hope. It's happening, and yeah, it's not perfect. But almost nothing in tech is. If we can build the right abstractions to paper over the mess that is the web as a platform, it might be possible for us to easily build reliable / useful / safe applications again.
rtsao 11y ago
CSJS author here, thanks for the plug! I think CSJS fairly unique in comparison to the numerous alternatives in that it: 1) Can be used without any tooling whatsoever. It's just plain JS. 2) Doesn't reinvent the wheel. You can use regular CSS (normal syntax, pseudo classes, media queries) and regular JS (variables, modules) together, allowing you to use the best of both worlds. I loved the ideas behind CSS Modules but wasn't sure about the complexity of re-implementing a new module/variable syntax into CSS. Why not just use what is already provided in JavaScript?
- shados 11y ago
  What's the story for tooling though? I haven't looked at CSJS much, just the readme, but it seems like the CSS bit essentially is a string, so you don't get the same kind of tooling you can from either CSS files or javascript objects, because it's all strings. Am I just missing something obvious?

by STRML 11y ago

nzonbi 11y ago

Polymer (https://www.polymer-project.org https://www.polymer-project.org) is a solution for the styles problem. You can pack each component with its own styles, complete with all its functionality. This allows for a very clean separation of concerns among components. Better than all other libraries that I have tried. I hope that web components take off, because it is a great way to build apps. Currently they are only supported in Chrome. Moving data between components in Polymer, can be done with data binding. The bad thing is that it could get messy for complex applications. Is not terribly bad, but it could be better. What Polymer needs is a better way to move data between components. If that problem is solved, Polymer would be an excellent alternative to create any kind of apps.

STRML 11y ago
Yeah, I had good fun building a Polymer frontend for my weekend project, Secureshare. I got around some of the data binding shortfalls with polymer-signals. It's been probably 2 years since I did it, so I'm sure there are better solutions - but I liked it as a dev environment. It's somewhat opaque, though. https://github.com/STRML/securesha.re-client/tree/master/polymer/app/elements https://github.com/STRML/securesha.re-client/tree/master/pol...
spankalee 11y ago
Note that style scoping comes with Shadow DOM, so once browsers support that (it's happening now), you can get scoping with no libraries. Polymer also adds a CSS custom properties polyfill and a CSS mixins (@apply) polyfill. Custom properties are implemented in FF and Chrome already, @apply is being worked on in Chrome. Polymer always tries to be forward compatible with actual web standards, one of it's main benefits :) Eventually Polymer will mostly be just templating and convenience helpers on top of native standards.

dinkumthinkum 11y ago

Does all that really give you hope for the web as an application platform? I feel like there is an obvious kind of joke in so many discussions of front-end web programming tools. It is boarding on like a farce or satire of some kind ... Every comment is has a different litany of obscure libraries and frameworks and combinations that sound like a set of random dictionary words with just a few common threads "react, react, blah blah." It doesn't seem like "pace of technology change" and it certainly doesn't inspire the idea of relative maturity of the web as an app platform .... it seems like a comedy.

STRML 11y ago
It does give me hope. It's happening, and yeah, it's not perfect. But almost nothing in tech is. If we can build the right abstractions to paper over the mess that is the web as a platform, it might be possible for us to easily build reliable / useful / safe applications again.

rtsao 11y ago

CSJS author here, thanks for the plug! I think CSJS fairly unique in comparison to the numerous alternatives in that it: 1) Can be used without any tooling whatsoever. It's just plain JS. 2) Doesn't reinvent the wheel. You can use regular CSS (normal syntax, pseudo classes, media queries) and regular JS (variables, modules) together, allowing you to use the best of both worlds. I loved the ideas behind CSS Modules but wasn't sure about the complexity of re-implementing a new module/variable syntax into CSS. Why not just use what is already provided in JavaScript?

shados 11y ago
What's the story for tooling though? I haven't looked at CSJS much, just the readme, but it seems like the CSS bit essentially is a string, so you don't get the same kind of tooling you can from either CSS files or javascript objects, because it's all strings. Am I just missing something obvious?