first blog post about breethe #208

marcoow · 2018-07-03T20:11:41Z

This is the first post about how we built Breethe. It covers what Breethe is and the basics of Glimmer.js. See #207 for an outlook of the other posts I'm planning in this series.

jorgelainfiesta · 2018-07-03T20:39:27Z

I think this article is pretty good to introduce Glimmer concepts and show considerations of the library while building an app with it. Its structure is appropriate to introduce the reader to Breethe and get on the right mindset to understand what a PWA with Glimmer is. Great work!

jorgelainfiesta · 2018-07-03T20:41:25Z

blog/_posts/2018-07-03-building-a-pwa-with -glimmer-js.md

+
+Besides making the Glimmer VM available to be used outside of Ember.js and offering a solution for situations where bundle size and load time performance is of crucial importance, Glimmer.js also serves as a testbed for new features and changes that will later make their way into the Ember.js framework. It is not bound to the strong stability guarantees that Ember.js makes and thus a great environment for experimenting with new approaches to existing problems that will usually require a few iterations until the API is stable.
+
+Some of these new things have already found their way back into Ember.js are (at least in some form):


We can also mention the use of node packages that are not addons. It's quite nice that we could use navigo and orbit without much setup.

these new things [that] have already

removed the "are"

@jorgelainfiesta: is that something that the Glimmer application pipeline enables somehow?

jorgelainfiesta · 2018-07-03T20:44:29Z

blog/_posts/2018-07-03-building-a-pwa-with -glimmer-js.md

+
+#### Testing
+
+Glimmer.js uses the new testing APIs that are also now available for Ember.js applications. These allow writing concise tests for asserting components render the expected results for a given set of properties and attributes:


Should we mention glimmerjs/glimmer.js#14 to avoid causing problems to people who'll try to write tests for Glimmer components?

Turbo87 · 2018-07-04T08:57:14Z

blog/_posts/2018-07-03-building-a-pwa-with -glimmer-js.md

+
+![The two main screens of the Breethe PWA](/images/posts/2018-07-03-building-a-pwa-with -glimmer-js/breethe-screens.png)
+
+As Glimmer.js is a UI component library only and does not include any routing functionality, we used added the Navigo router to set up logic that maps the current route to the corresponding application state and vice versa:


As Glimmer.js is "only" a UI component library

I'd move the "only" and maybe put it in quotes

makes sense 👍

Turbo87 · 2018-07-04T08:59:21Z

blog/_posts/2018-07-03-building-a-pwa-with -glimmer-js.md

+{{/if}}
+{% endraw %}```
+
+You might notice the `@` prefix of the `searchTerm` and `locationId` properties that are set on the components. This prefix distinguishes properties that are to be passed to the component instance as opposed to attributes that will be applied to the component's root DOM element.


you could mention here that this is coming to Ember too, and that there are already polyfills that make this available in older Ember versions

that is in fact mentioned below ;)

Turbo87 · 2018-07-04T09:21:23Z

blog/_posts/2018-07-03-building-a-pwa-with -glimmer-js.md

+
+This is just a brief overview of how an application built with Glimmer.js works. We will cover some of these things in more detail in future posts, particularly how we load and manage data with Orbit.js. For a closer look on the inner workings of Breethe, check out the [code on github](https://github.com/simplabs/breethe-client).
+
+#### From Glimmer.js Ember.js


missing "to"

Turbo87 · 2018-07-04T09:22:12Z

blog/_posts/2018-07-03-building-a-pwa-with -glimmer-js.md

+
+Besides making the Glimmer VM available to be used outside of Ember.js and offering a solution for situations where bundle size and load time performance is of crucial importance, Glimmer.js also serves as a testbed for new features and changes that will later make their way into the Ember.js framework. It is not bound to the strong stability guarantees that Ember.js makes and thus a great environment for experimenting with new approaches to existing problems that will usually require a few iterations until the API is stable.
+
+Some of these new things have already found their way back into Ember.js are (at least in some form):


these new things [that] have already

Turbo87 · 2018-07-04T09:23:16Z

blog/_posts/2018-07-03-building-a-pwa-with -glimmer-js.md

+
+Some of these new things have already found their way back into Ember.js are (at least in some form):
+
+* The `@` syntax as shown above that clearly distinguishes properties that are set on a component instance vs. attributes that are set on a component's root DOM element - [this PR](https://github.com/emberjs/ember.js/commit/4bd3d7b882484919682ab0cdb57f81584abc503a) enables the feature flag by default.


might be better to link the RFC?

Turbo87 · 2018-07-04T09:24:04Z

blog/_posts/2018-07-03-building-a-pwa-with -glimmer-js.md

+      <MeasurementRow
+        @value=12
+        @parameter=pm25
+        @unit=ppm


quotes missing here?

Hm, this actually seems to work like that in the test but I wonder why 🤔 Would be good to add quotes anyway though 👍

Turbo87 · 2018-07-04T09:25:22Z

blog/_posts/2018-07-03-building-a-pwa-with -glimmer-js.md

+});
+```
+
+This test case tests the `MeasurementRow` component by passing a set of properties and asserting that the DOM contains the expected elements with the expected content. The key element to be aware here is the invocation of `setupRenderingTest` which sets this test case up as a rendering test, which for example makes the `this.render` method available. For a more detailed overview of these API see the [talk on the topic](https://www.youtube.com/watch?v=8D-O4cSteRk) that [@TobiasBieniek](https://twitter.com/TobiasBieniek) gave at this year's EmberConf.


my talk is entirely unrelated to Glimmer testing though, and underneath it works very different...

I'm not meaning to imply the talk is related to Glimmer but only the testing APIs that are also used in Glimmer. Maybe this should be rephrased to make that clearer…

yeah, but the testing APIs are not also used in Glimmer. they may look slightly similar, but they are in fact quite different in some regards.

removed the reference

oliverbarnes

👍 nice and clear, and interesting to me - Glimmer is making more sense now

niklaslong

This is a really great post, clear and well structured 🎉
I left feedback in regards to a couple nitpicks.
Looking forward to the next posts!

niklaslong · 2018-07-05T07:51:54Z

blog/_posts/2018-07-03-building-a-pwa-with -glimmer-js.md

+
+#### Breethe
+
+While this project was mostly meant as a technology spike to validate Glimmer's suitability for real projects as well as testing some techniques for running and serving web apps that we had in our minds for some time, we wanted to build something useful and meaningful. What we built is Breethe, a progressive web apps that gives users quick and easy access to air quality data for locations around the world. Pollution and global warming are getting worse rather than better and having easy access to data that shows how bad the situation actually is is the first step for everyone to question their decisions and maybe change a few things that can help improve the situation.


In progressive web apps that gives users quick, apps doesn't need the s.

data that shows how bad the situation actually is is the first step - maybe needs a comma between is and is?

niklaslong · 2018-07-05T07:56:50Z

blog/_posts/2018-07-03-building-a-pwa-with -glimmer-js.md

+
+#### Glimmer.js
+
+Glimmer.js is a thin component library built on top of Ember.js's rendering engine, the Glimmer VM. It is optimized for small file size and maximum runtime performance and thus a great fit for situations where a full-featured framework like Ember.js is not needed and too heavy weight.


I think heavyweight in one word is the meaning you wanted here?

yes probably :)

niklaslong · 2018-07-05T08:13:56Z

blog/_posts/2018-07-03-building-a-pwa-with -glimmer-js.md

+* The possibility to use ES2015 classes instead of Ember.js' own object model - see [this blog post](https://medium.com/build-addepar/es-classes-in-ember-js-63e948e9d78e) for more information.
+* Template-only components that do not have a wrapping `<div>` - can be enabled as an [optional feature](https://github.com/emberjs/ember-optional-features).
+
+Eventually it will be possible to seamlessly use Glimmer.js components in Ember.js applications (see the [quest issue](https://github.com/emberjs/ember.js/issues/16301) for more information). That will also enable "upgrading" Glimmer.js applications to Ember.js once they reach a certain size and complexity and the additional features and concepts that Ember.js provides over Glimmer.js justify a more heavy-weight framework.


heavyweight instead of heavy-weight

first blog post about breethe

b9fd427

marcoow added the blog post label Jul 3, 2018

marcoow requested review from oliverbarnes, Turbo87, pangratz, wadie, geekygrappler, jorgelainfiesta, jayjayjpg and niklaslong July 3, 2018 20:11

jorgelainfiesta reviewed Jul 3, 2018

View reviewed changes

Turbo87 reviewed Jul 4, 2018

View reviewed changes

oliverbarnes approved these changes Jul 4, 2018

View reviewed changes

address review feedback

ce8915d

niklaslong reviewed Jul 5, 2018

View reviewed changes

marcoow added 3 commits July 5, 2018 10:59

wording fixes

41a2c9b

fix file name

f247454

rephrase section on testing

c1b2257

marcoow force-pushed the breethe-post-1 branch from 084d5f7 to c1b2257 Compare July 5, 2018 09:15

marcoow added 3 commits July 5, 2018 11:34

improve wording

3eac3fb

section on ember-test-selectors

38d254e

formatting

19bec9d

marcoow merged commit 74da155 into master Jul 6, 2018

marcoow deleted the breethe-post-1 branch July 6, 2018 11:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

first blog post about breethe #208

first blog post about breethe #208

marcoow commented Jul 3, 2018

jorgelainfiesta commented Jul 3, 2018

jorgelainfiesta Jul 3, 2018

Turbo87 Jul 4, 2018

marcoow Jul 4, 2018

marcoow Jul 4, 2018

jorgelainfiesta Jul 3, 2018

marcoow Jul 5, 2018

Turbo87 Jul 4, 2018

marcoow Jul 4, 2018

Turbo87 Jul 4, 2018

marcoow Jul 4, 2018

Turbo87 Jul 4, 2018

marcoow Jul 4, 2018

Turbo87 Jul 4, 2018

Turbo87 Jul 4, 2018

Turbo87 Jul 4, 2018

marcoow Jul 4, 2018

Turbo87 Jul 4, 2018

marcoow Jul 4, 2018

Turbo87 Jul 4, 2018

marcoow Jul 5, 2018

oliverbarnes left a comment

niklaslong left a comment

niklaslong Jul 5, 2018

niklaslong Jul 5, 2018

marcoow Jul 5, 2018

niklaslong Jul 5, 2018


		Besides making the Glimmer VM available to be used outside of Ember.js and offering a solution for situations where bundle size and load time performance is of crucial importance, Glimmer.js also serves as a testbed for new features and changes that will later make their way into the Ember.js framework. It is not bound to the strong stability guarantees that Ember.js makes and thus a great environment for experimenting with new approaches to existing problems that will usually require a few iterations until the API is stable.

		Some of these new things have already found their way back into Ember.js are (at least in some form):


		#### Testing

		Glimmer.js uses the new testing APIs that are also now available for Ember.js applications. These allow writing concise tests for asserting components render the expected results for a given set of properties and attributes:


		![The two main screens of the Breethe PWA](/images/posts/2018-07-03-building-a-pwa-with -glimmer-js/breethe-screens.png)

		As Glimmer.js is a UI component library only and does not include any routing functionality, we used added the Navigo router to set up logic that maps the current route to the corresponding application state and vice versa:


		This is just a brief overview of how an application built with Glimmer.js works. We will cover some of these things in more detail in future posts, particularly how we load and manage data with Orbit.js. For a closer look on the inner workings of Breethe, check out the [code on github](https://github.com/simplabs/breethe-client).

		#### From Glimmer.js Ember.js


		Some of these new things have already found their way back into Ember.js are (at least in some form):

		* The `@` syntax as shown above that clearly distinguishes properties that are set on a component instance vs. attributes that are set on a component's root DOM element - [this PR](https://github.com/emberjs/ember.js/commit/4bd3d7b882484919682ab0cdb57f81584abc503a) enables the feature flag by default.


		#### Breethe

		While this project was mostly meant as a technology spike to validate Glimmer's suitability for real projects as well as testing some techniques for running and serving web apps that we had in our minds for some time, we wanted to build something useful and meaningful. What we built is Breethe, a progressive web apps that gives users quick and easy access to air quality data for locations around the world. Pollution and global warming are getting worse rather than better and having easy access to data that shows how bad the situation actually is is the first step for everyone to question their decisions and maybe change a few things that can help improve the situation.


		#### Glimmer.js

		Glimmer.js is a thin component library built on top of Ember.js's rendering engine, the Glimmer VM. It is optimized for small file size and maximum runtime performance and thus a great fit for situations where a full-featured framework like Ember.js is not needed and too heavy weight.

first blog post about breethe #208

first blog post about breethe #208

Conversation

marcoow commented Jul 3, 2018

jorgelainfiesta commented Jul 3, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliverbarnes left a comment

Choose a reason for hiding this comment

niklaslong left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment