14 ms·
Glimmer – Fast and light-weight UI components
- elwayman02 10y agoGlimmer is smaller and faster than React, with TypeScript supported natively. This is a game-changer for people who are looking for a lightweight rendering library that ships with great tooling support and a larger framework ecosystem behind it.
- vorpalhex 10y agoThe install parameter you provide already requires yarn and the rather large ember-cli, in addition to requiring my app to be built on top of glimmer instead of with it. How can this possibly be considered remotely lightweight, especially compared to something like Mithril? I count at least 12 repos on your github that seem to be integral components including a dedicated CLI!
- nkristoffersen 10y agoYou shouldn't be deploying a CLI into production. While I haven't looked closely at this particular system, guaranteed you are not deploying the CLI. Just using the CLI to create deployable code. When people say "lightweight" they mean small sizes over the wire. The final size of the production/deployment code. Not the development code.
- lyime 10y agoWhy is the size of the CLI a concern?
- Touche 10y agoWhat I think the GP is saying, and I agree, is that the CLI makes Glimmer the center of your world and not just another library you use. MomentJS doesn't come with a CLI tool to use it. You just use it.
- EvilTrout 10y agoThose are only the build tools, and trust me you want a great build pipeline when dealing with Javascript these days! In the screencast it shows that when you deploy you just get a javascript file for your components that should be super small.
- tomdale 10y agoA legitimate question! One thing people really love about Ember is that the process for going from nothing to a working app is very streamlined. Typically, this is not the case with smaller component libraries. Personally, I think there's a market for opinionated tools on this side of the simplicity spectrum. Another aspect of this is that more complex build tools can often do better analysis of your app and move more work to build time, improving the boot and/or runtime performance of your app. For me, I'll trade a longer npm install time if it leads to a better experience for users. That said, all of the Glimmer packages are distributed as AMD, CommonJS and JavaScript modules on npm[0], with a `module` field and everything in their package.json. While it's not as turnkey as using Ember CLI, I hope people feel empowered to experiment with whatever their favorite build tools are. [0]: https://www.npmjs.com/org/glimmer https://www.npmjs.com/org/glimmer
- TheAceOfHearts 10y agoWhat are their respective sizes? Could you link to some benchmarks? I wonder how it'll stack up to React Fiber. I love when libraries compete on performance, since it can end up benefiting everyone.
- tomdale 10y agoThe Glimmer runtime is under 30k, and we have not done much bundle optimization yet so hopefully this should go down a little bit even further. React Fiber is currently just over 70k, and that's just the reconciler, not the complete React package. However, according to Dan Abramov[0] they have not yet focused on optimizing the bundle size either. And Fiber includes some prioritization features that we don't have in Glimmer yet. https://twitter.com/dan_abramov/status/844223224732958721 https://twitter.com/dan_abramov/status/844223224732958721
- boubiyeah 10y agoDid you try snabbdom? (https://github.com/snabbdom/snabbdom https://github.com/snabbdom/snabbdom) Works well for us :)
- ergo14 10y agoPolymer already fills that nieche I believe, except TS (it uses plain ES6).
- JeremyBanks 10y agoExcept for the lack of speed. And the lack of great tooling. And the lack of a large ecosystem. And the insane data model. I regret every moment I used Polymer.
- ergo14 10y ago- Lack of speed? - speed is equal to vue/react in dbmon benchmarks (even with polyfills). - Tooling is quite good, polymer-cli, gulp, grunt support to name the most common stuff. - https://www.webcomponents.org/elements https://www.webcomponents.org/elements - Thats a vibrant ecosystem :-) Big enterprises like ING, IBM, USAToday participate and release their components. (7k developers on slack channel) - Insane data model? I work with my polymer elements same as I do with angular and react components. If in doubt just use redux/uniflow-polymer. I get that you might not like it, but the issues you raised here are hardly valid (unless you used 0.5 or fresh 1.0)
- spankalee 9y agoCan you tell me anything in particular lacking in our tooling? I know we have a lot of issues open, and a long way to go, of course, but if there's something specific it'd be helpful.
- jbergens 10y agoI think Glimmer/Ember have lost already. React is fast enough for most things and then there is Infernfo and Preact that are faster right now. If you mean a larger ecosystem as in number of libraries I would guess that the react ecosystem is 10x the size of Embers.
- maxkwallace 9y agoFrom my experience, the ecosystems are qualitatively different. In Ember's, there's typically one community-sanctioned library that solves a particular problem, whereas React's tends to have more competing libraries. Like the frameworks, it's a tradeoff betw. customization and strong conventions. Doesn't make sense to compare based on number of libraries. Both approaches are valuable.
- mlsarecmg 10y agoReact-lite is 25kb, it gets there by stripping off proptypes and some other things without, sacrificing functionality, so it can always be applied as a production alias. Things like Preact and Inferno compat go even further, you can bring React down to 5kb or less. With React Fiber it will be easier to create modular packages that contain specifically what the app needs. TS already supports JSX.
- chrisabrams 10y agoFast and "light-weight" Ember UI components
- matthoiland 10y agoTl;dr; Ember is often overkill for a simple app. Glimmer is a lightweight framework, similar to VueJS with tiny build sizes. Being part of the Ember ecosystem, a simple Glimmer app can grow as needed to a full Ember app. "NPM your way to Ember" was the motto they used today at EmberConf. As an Ember AND Vue fanboy, this is cool.
- 0xADADA 10y agoLooks like its a smaller deployment (38kb) nearly as small as Preact, much smaller than Ember, and brings TypeScript support and <angle-bracket> style components to the ember ecosystem.
- Touche 10y ago38k is not nearly as small as Preact. Preact is 4k.
- config_yml 10y agoside point: rwjblue is an absolute beast if you look at his contribution activity https://github.com/rwjblue https://github.com/rwjblue, his output is amazing and much appreciated!
- EvilTrout 10y agoAs a long time (5 years full time) Ember developer, this is quite interesting to me philosophically. I've spent a lot of time trying to tell people that all the stuff in Ember is there for a reason; for example, you're going to need a router, you're going to need support for controllers, etc. I still feel strongly that if your app is large and serious you are going to need that stuff. But. A lot of people just want to jump in and start building. React's immense popularity has shown the value in creating a view layer framework without all the extra stuff. It's great for onboarding new developers since there is less surface area to familiarize yourself with, and you can add in extra stuff (work your way towards full Ember) as you go. It also comes with the added benefit of being able to add small components to a page without running the whole thing as an application, which is a use case Ember was not so great at before. Overall I think it's a great announcement.
- k__ 10y agoI used Ember for about 2 years and thought so too. Now I'm using React and I think it's approach is much better. The API is tiny compared to Ember and there aren't much concepts, still it accomplishes everything Ember did. I feel bad to say this, but in the modular, library heavy, NPM based JS world of today, React (and other component frameworks like Cyclejs or hyperapp) fits just in. While Ember feels like a anachronism of the big framework days of Rails. :/
- mwpmaybe 10y agoGlimmer.js may be more your speed!
- _____s 10y agoWith Glimmer as a standalone library, I think ember's going in the right direction. There's been some excellent work on Fastboot and Engines in the last year or so and I really like the approach ember's team is taking with this. React, for me, still offers better composability. You deal in plain JS objects, pass them around, and can build really complex UIs on top of that. I also really like redux. I still use ember heavily though; I think we'll get there as well!
- mnutt 10y agoFor those that want to try it out, it looks like the released ember-cli version doesn't support it. To test it out, you can replace the first instruction on that page with: `yarn global add ember-cli/ember-cli` (edited for better command)
- mwpmaybe 10y agoThis will do the trick: yarn global add ember-cli/ember-cli
- tomdale 10y agoThis is because we recently added the ability to specify a blueprint as an npm package, and it hasn't made it out of canary channel yet. If you don't want to install canary Ember CLI, you can always just give it the longer git url: ember new my-glimmer-app -b https://github.com/glimmerjs/glimmer-blueprint.git https://github.com/glimmerjs/glimmer-blueprint.git
- leeoniya 10y agoto avoid repeating myself here: https://www.reddit.com/r/javascript/comments/6212ym/glimmerjs_the_rendering_engine_behind_emberjs_can/dfiw396/ https://www.reddit.com/r/javascript/comments/6212ym/glimmerj...
- finchisko 10y ago"fastest DOM rendering engines, delivering exceptional performance for initial renders as well as updates." I read this every time new fw pops up. Usually those kind of claims are exceptionally exaggerated.
- ryantablada 10y agoA big difference around that is that Glimmer is not just a new FW. It is an abstracted and consolidated version of the view/component layer that has been battle tested in Ember for years.
- boubiyeah 10y agoOf course it's exaggerated. It's just marketing. You could write a naive virtual-dom or string template implementation and it would still be the DOM operations that would by far take the longest time. So decent frameworks and libs are comparing their small overhead only.
- subpixel 10y agoThis looks impressive and has been something the Ember community has been looking forward to for a long time, but I wonder whether Glimmer is a tool that will actually sway developers who are not already using Ember to start using it (read: choose Ember over React, Vue, Angular, etc.).
- vvoyer 10y agoDid not find easily any live example, should be required for any "UI" library. And should be displayed on the frontpage
- tomdale 10y agoThe API docs themselves are a Glimmer app: https://glimmerjs.com/api/ https://glimmerjs.com/api/. The source code is here: https://github.com/glimmerjs/glimmer-api-docs https://github.com/glimmerjs/glimmer-api-docs You may also enjoy the prerequisite turbo-stress-test app: https://glimmerjs.com/demos/uptime-boxes/ https://glimmerjs.com/demos/uptime-boxes/ https://github.com/glimmerjs/glimmer-demos https://github.com/glimmerjs/glimmer-demos
- leeoniya 10y agodo you guys have any benchmarks where the dom tree is not mostly static? uptime-boxes suffers from the same problems as the original dbmon - the tree is static and the diffing engine has little to do while the DOM mutations are only nodeValue/textContent and className.
- mccoyspace 10y agoWe built this with glimmer. https://mcast.io/katgraham-exclusives/ https://mcast.io/katgraham-exclusives/
- deno 10y agoWhat exactly do you need glimmer for on that page?
- pier25 10y agoCan anyone compare this to Vue?
- panic 10y agoClose to the metal: Glimmer is one of the fastest DOM rendering engines, delivering exceptional performance for initial renders as well as updates. Architected like a virtual machine (VM), Glimmer compiles your templates into low-level code so it can run as fast as possible—without sacrificing ease of use. By low-level code, they mean… JavaScript, right? In what sense is this "close to the metal"?
- ericwood 10y agoPretty sure this is partially a joke based on the whole "nodeJS is close to the metal" thing: https://twitter.com/shit_hn_says/status/234856345579446272?lang=en https://twitter.com/shit_hn_says/status/234856345579446272?l...
- halfdan 10y agoNo, they are compiling it down to instructions which are then interpreted by the Ember/Glimmer VM: https://youtu.be/vg5A_UOGShg?t=42m8s https://youtu.be/vg5A_UOGShg?t=42m8s
- spicyj 10y ago…which is written in JS. Everything's all relative though. JS is certainly a reasonable choice for this.
- shawndumas 10y agoThey mean that they made use of --allow_natives_syntax to identify Hidden Classes.
- erikpukinskis 10y ago> Glimmer compiles your templates into low-level code so it can run as fast as possible—without sacrificing ease of use. What's the benefit vs just writing your templates in JavaScript in the first place?
- lowboy 10y ago> ease of use
- LocalPCGuy 10y agoJavaScript takes time to parse and execute. My understanding is that the Glimmer solution reduces both parsing and execution time because it uses techniques that are highly optimized by the browser JavaScript engines, which makes it faster (sometimes significantly) than just using JavaScript templates. I also believe that's what is referred to when they use words like "low-level" and "close to the metal" in reference to what they are doing.
- tomdale 10y agoJSX vs. templates is a common debate, with popular JSX options like React and Preact and template-based options like Vue and Glimmer. The reality is that there are hard tradeoffs to both and anyone who tells you one is obviously superior to the other is probably trying to sell you something. For me personally, templates ever-so-slightly edge out tools like JSX. For one, I subscribe to the Rule of Least Power[0]. Having the full expressiveness of JavaScript is very nice, but it makes it harder for tools to statically analyze and optimize the rendering process. Ember has gone through three major rendering engine architectures now (string-based, DOM-based and now the Glimmer VM) and the simplicity of the templating language has made that portability much easier. [0]: https://www.w3.org/2001/tag/doc/leastPower.html https://www.w3.org/2001/tag/doc/leastPower.html More importantly though, there are a lot of people in the world who know HTML and CSS. The fact that Glimmer templates are "just HTML" makes them accessible to people like designers who may not understand all of the fancy destructuring or array mapping happening in your JSX. Lastly, and this is perhaps just a personal foible, but I have a really hard time mentally mapping more complicated JSX expressions into the final HTML output. It's fine when you're writing it, but reading it later, particularly to write CSS for it, is more challenging for me than Handlebars. I know some people would say that this is a code smell and that I should break that component up into smaller components, but I'd rather that decision be made by me than because I feel forced into it by the muddiness of my render() method.
- conradk 10y agoI can't help but think: yet another front-end library. But Ember being solid, there is probably good reason for this project. What does Glimmer do that all of the existing view libraries couldn't do ? x-tags, vue, react, preact, etc, etc, etc. Wouldn't an abstraction layer on top of any of those libraries have avoided the need to create an entirely new project ?
- Touche 10y agoI think the abundance of view libraries is evidence that no one has really "solved" it.
- chancancode 10y agoThis is _the_ abstraction layer below an existing framework called Ember.js
- malindamartin 10y agoan essential difference is compiling templates into compact opcodes instead of vanilla JS and effective rerenders
- ssijak 10y agoWhoa, good. I was worried, 12h passed without major new JS framework on the front page. But, clock started ticking again..
- a-priori 10y agoMaybe you should read about it a bit before you dismiss it with useless snark. This is not a new JS framework. This is the view layer extracted from Ember as a standalone library.
- cocktailpeanuts 10y agoIt's a JS framework, it's new. No?
- conradk 10y agoAh, thanks for explaining that ! I thought the Ember team had started an entirely new project instead of reusing something that already existed. If they extracted it, that makes much more sense to me now.
- always_good 10y agoI don't understand these sorts of comments. "Heh, good thing you read and summarized TFA because I didn't and instead jumped to conclusions." I see it on HN all the time, like a celebration for not having to read the submission. "Phew, that was a close one!" There are maybe 8 sentences of copy on that landing page. One of them is: > Because Glimmer powers the components in Ember, > there’s a battle-tested, full-stack framework > waiting for you—if you need it.
- conradk 10y agoThat's not what I meant to say at all. Here, I saw what looked like a new project. You say I should have understood right away because Glimmer is said to power Ember's components. But the Ember team could very well have built an entirely new engine for its components. I thought Ember used to use Handlebars (didn't it?) and had just recently built a new engine (aka Glimmer) instead of adapting an existing one (React, Vue, etc). But that sounded odd, hence my question. If you see these sorts of things all the time, there may be a reason: communication is hard and we all interpret things a bit differently (depending on our experience, our mindset, our native language, etc).
- mhd 10y agoHmm, pretty heavy use of ES6, too (async/await, decorators etc.). Is there any "modern" library left that lets you use the browser's JavaScript engine directly, without transpiling?
- deno 10y agoWhich browser? http://caniuse.com/#search=async%20functions http://caniuse.com/#search=async%20functions
- bjacobel 10y agoNeither async/await nor decorators are part of ES6 (which is more properly called ES2015). Almost all major browsers support ES2015. A few recent versions support async/await, now that it's expected for that syntax to be a part of ES2017. None support decorators (in fact, I'd be surprised if decorators ever make it into the formal ES spec).
- mhd 10y agoCompared to other Javascript libraries, it's not that bad, I was just hoping for a second that "extracted the render engine" meant something really lightweight, i.e. something you could just include as a script tag for lightweight use (like "sizzle", back in the days). It's still going to be worth a look, as I don't mind opinionated stuff for some mid-sized SPAs and tools, I'm just missing a tool for the lower end in my belt these days.
- modularfurnitur 10y agoI cut my teeth using Ember a few years back, the whole community is amazing and does great work. Using react/redux now, and while I think it's the simplest and most pragmatic approach (the connect function changed the game), I think the api's over in clojurescript land, specifically re-frame are the best . It's conceptually the same as react/redux, but with a few more facilities for isolating side effects in actions, and a wayyyyy simpler api for querying the store in functional components. But what I came to say is I think templating languages are sub par. Using an actual programming language that returns "html", or some variant (like clojurescripts hiccup language) is way more useful. I wouldn't use this because of that.
- dustinfarris 9y agoIf you feel like giving Ember another whirl in the future, ember-redux is production-ready and has a comparable API to react-redux. (e.g. `connect`) https://github.com/ember-redux/ember-redux https://github.com/ember-redux/ember-redux
- WhitneyLand 10y agoThis is the way not to design a landing page. 1) Ui components for what? 2) "Attention to detail of ember" - is that a quality comparison, or is it only for ember framework? 3) UI project without a single screenshot? 4) Doesn't mention one actual feature or component 5) GitHub link doesn't go to a repo. Instead it's a list of repos that you have to click around in to find the main project. 6) API docs link goes to a page that is blank except for another link to the actual API docs. 7) Add a few points back because at least they didn't name it CockroachUI (I still have hope the CockroachDB guys will change their name). Just a guess - rhis was done by someone who has not agonized over bounce rates in google analytics.
- kolme 10y agoYes, and 8) being a library and not having any code snippets.
- andai 10y ago9) Video thumbnail (and half of video) is a guy's face. (Consider changing video thumbnail to a screenshot of the software in action, or even a logo.)
- deleted 10y ago[deleted]
- mnutt 10y agoMy guess is that while it's a standalone page, given the timing (released during emberconf keynote today) the copy is mostly targeted at ember devs, at least initially. As someone who is intimately familiar with ember, I immediately understood that it's for building apps with the ember rendering engine sans ember itself. For other devs, the purpose and benefits may not be as obvious.
- Jare 10y agoWith zero experience in ember, as soon as I saw that I first needed to install the ember cli, I assumed it was something built on top of ember. Which doesn't sound lightweight or even interesting to a non-ember user, so was quickly followed by a snarky smile and a quick close of the page. After reading some HN comments I understood that it was like a collection of actual widgets (like bootstrap, but lighter?) and was interested. Then I read the docs, saw it is a library to build components, and I filed it under "not going to use ember so I may as well stay with React".
- aligajani 10y agoOh no, not again..
- Axsuul 10y agoThis library has a lot of promise for prototyping your app in Glimmer and then dropping it into an Ember framework when the app gets bigger. However, the whole landing page screams "premature release". The API docs are sparse, the landing page barely conveys what the hell is going on, and there's so many other minor nuances. Why does the GitHub link on the top right go to the website source for example? Everyone pretty much expects to be taken to the actual library GitHub.
- bluepnume 10y agoComing from someone who loved writing apps with Ember, before moving on to other things, I think this is a step in the right direction. Having the UI library as its own standalone thing is a great move. That said, it's way too hard to figure out how to buy into this thing without adopting the whole ember-cli ecosystem. Ember-cli is a fantastic achievement, but for god's sake, give me a CDN link with a global `glimmer` object so I can at least play around with the thing in one of my projects, without buying into the entire ecosystem first! I know that Ember is the "we'll take care of your whole app" framework, but with Glimmer maybe there's a chance here to cater to folks who love libraries like React, because they can get started with about 5 lines of code bunged into an html file and grow from there. Let me start small, and make it easy for me to grow big.
- dandare 10y agoI always wondered what is the business model of a library like this. Is just someone spending hundreds of hours of his free time to create this for the community? Or is there a business model I don't see?
- Matthias247 10y agoIn theory you could hope that you find users and afterwards offer consulting and support services for your users. As well as charge for development of custom features/extensions that they need. I guess in practice I think business models around libraries, frameworks and infrastructure software are hard. There is often lots of competition. And users in the meantime often expect that these things (including support) are for free.
- cibernox 10y agoThere is none. We develop ember because we need a tool to solve our problems and the existing solutions weren't good enough in at least some aspect that mattered. The idea is that opensourcing software makes people you don't know can use it, improve it and ultimately you get those improvements yourself.
- dbbk 10y agoWell there's a group of people in the Core Team. I know at least one of them has been hired by their company (LinkedIn) to work on the framework full time, as their app (and subsequent business) is built on top of it, so it makes sense to have someone paid to focus on it.
- ergo14 10y agoLooking at the docs this looks a bit like Polymer 2.0, except not using ES6 but TS. I like it.