Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The Ember Times Octane Special (No. 130) - January 10, 2020 #459

Merged
merged 59 commits into from
Jan 11, 2020
Merged
Show file tree
Hide file tree
Changes from 40 commits
Commits
Show all changes
59 commits
Select commit Hold shift + click to select a range
3dcb130
blog(embertimes#octane-special): add template
jayjayjpg Sep 4, 2019
53f8588
blog(embertimes#130): add learning resources writeup
jayjayjpg Jan 6, 2020
1b29cc4
Update source/2020-01-10-the-ember-times-issue-130.md
jayjayjpg Jan 6, 2020
33f23d2
Update source/2020-01-10-the-ember-times-issue-130.md
jayjayjpg Jan 6, 2020
706f3ac
Update source/2020-01-10-the-ember-times-issue-130.md
jayjayjpg Jan 6, 2020
1152edd
Merge pull request #477 from jessica-jordan/embertimes-jjo
jayjayjpg Jan 6, 2020
f49c552
Octane at EmberConf
MinThaMie Jan 8, 2020
9a0531d
Update source/2020-01-10-the-ember-times-issue-130.md
jayjayjpg Jan 9, 2020
133e011
blog(octanespecial): how to migrate to octane (#480)
chrisrng Jan 10, 2020
33038a5
Update source/2020-01-10-the-ember-times-issue-130.md
MinThaMie Jan 10, 2020
6003a61
Update source/2020-01-10-the-ember-times-issue-130.md
MinThaMie Jan 10, 2020
ec56e9f
Update according to Isaac's feedback
MinThaMie Jan 10, 2020
1054a48
Merge branch 'blog/embertimes-octane-special' into octaneAtEmberConf
MinThaMie Jan 10, 2020
8620c13
Update source/2020-01-10-the-ember-times-issue-130.md
ijlee2 Jan 10, 2020
3c6c354
Merge pull request #479 from ember-learn/octaneAtEmberConf
ijlee2 Jan 10, 2020
7c75df5
Add section on Atlas - Unfinished
Alonski Jan 10, 2020
6a38dd0
Merge branch 'blog/embertimes-octane-special' into Alonski-patch-2
amyrlam Jan 10, 2020
c69120f
add octane community feedback
jaredgalanis Jan 10, 2020
080fc97
Update source/2020-01-10-the-ember-times-issue-130.md
amyrlam Jan 10, 2020
ee38ce2
fix alex lint / typo
jaredgalanis Jan 10, 2020
98dbc0b
Merge pull request #481 from ember-learn/Alonski-patch-2
amyrlam Jan 10, 2020
6db519d
one more alex fix attempt
jaredgalanis Jan 10, 2020
9b6c649
Added a section that explains what editions are and what features are…
ijlee2 Jan 10, 2020
95032ca
Merge branch 'blog/embertimes-octane-special' into blog/embertimes-oc…
ijlee2 Jan 10, 2020
0f6c237
Update source/2020-01-10-the-ember-times-issue-130.md
ijlee2 Jan 10, 2020
44489ac
Update source/2020-01-10-the-ember-times-issue-130.md
ijlee2 Jan 10, 2020
946c50d
Update source/2020-01-10-the-ember-times-issue-130.md
ijlee2 Jan 10, 2020
fc8cc62
Update source/2020-01-10-the-ember-times-issue-130.md
ijlee2 Jan 10, 2020
fca67f1
Update source/2020-01-10-the-ember-times-issue-130.md
jaredgalanis Jan 10, 2020
5d672d8
Update source/2020-01-10-the-ember-times-issue-130.md
jaredgalanis Jan 10, 2020
1c7aa0e
Update source/2020-01-10-the-ember-times-issue-130.md
ijlee2 Jan 10, 2020
0243575
Update source/2020-01-10-the-ember-times-issue-130.md
jaredgalanis Jan 10, 2020
042aeb1
Update source/2020-01-10-the-ember-times-issue-130.md
jaredgalanis Jan 10, 2020
e90389e
Merge pull request #483 from ijlee2/blog/embertimes-octane-special
ijlee2 Jan 10, 2020
8369c6f
Merge pull request #482 from ember-learn/octane-community-feedback
jayjayjpg Jan 10, 2020
a2fec22
Update 2020-01-10-the-ember-times-issue-130.md
MinThaMie Jan 10, 2020
c587eba
Update source/2020-01-10-the-ember-times-issue-130.md
MinThaMie Jan 10, 2020
20828f7
Update source/2020-01-10-the-ember-times-issue-130.md
MinThaMie Jan 10, 2020
29ff592
Update source/2020-01-10-the-ember-times-issue-130.md
MinThaMie Jan 10, 2020
ae4c0c3
Merge pull request #484 from ember-learn/intro_and_quotes
jayjayjpg Jan 10, 2020
e43b21c
Update 2020-01-10-the-ember-times-issue-130.md
amyrlam Jan 10, 2020
41fea34
Some tweaks
amyrlam Jan 10, 2020
1e1a30c
blog(embertimes#130): add ember atlas migration guide to learn more s…
jayjayjpg Jan 10, 2020
92a33fa
blog(embertimes#130): add more quotes
jayjayjpg Jan 10, 2020
ac7a974
Merge pull request #485 from jessica-jordan/embertimes-jjo2
jayjayjpg Jan 10, 2020
39a2a62
tweaks
amyrlam Jan 10, 2020
46dd5ba
test alex
amyrlam Jan 10, 2020
3143d66
tweak
amyrlam Jan 10, 2020
9a50f0f
Update source/2020-01-10-the-ember-times-issue-130.md
ijlee2 Jan 10, 2020
0215568
tweaks
amyrlam Jan 10, 2020
7208272
Merge branch 'blog/embertimes-octane-special' of github.com:ember-lea…
amyrlam Jan 10, 2020
4c6c289
tweaks
amyrlam Jan 10, 2020
bcb0ef4
Update source/2020-01-10-the-ember-times-issue-130.md
ijlee2 Jan 10, 2020
333f045
test fix alex
amyrlam Jan 11, 2020
8481afb
Merge branch 'blog/embertimes-octane-special' of github.com:ember-lea…
amyrlam Jan 11, 2020
3b1e87e
test alex
amyrlam Jan 11, 2020
eb940d8
test alex
amyrlam Jan 11, 2020
4987354
fix alex forreal
amyrlam Jan 11, 2020
9c7bd8e
Update source/2020-01-10-the-ember-times-issue-130.md
jayjayjpg Jan 11, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion source/2019-12-20-the-ember-times-issue-129.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: The Ember Times - Issue No. 129
author: Chris Ng, Amy Lam, Isaac Lee, Godfrey Chan, Jessica Jordan
tags: Recent Posts, Newsletter, Ember.js Times, Ember Times, 2019
tags: Newsletter, Ember.js Times, Ember Times, 2019
alias : "blog/2019/12/20-the-ember-times-issue-129.html"
responsive: true
---
Expand Down
237 changes: 237 additions & 0 deletions source/2020-01-10-the-ember-times-issue-130.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,237 @@
---
title: The Ember Times - Issue No. 130
author: Chris Ng, Alon Bukai, Jessica Jordan, Anne-Greeth van Herwijnen, Isaac Lee, the crowd
tags: Recent Posts, Newsletter, Ember.js Times, Ember Times, 2020
alias : "blog/2020/01/10-the-ember-times-issue-130.html"
responsive: true
---

Happy New Year, Emberistas! 🐹

<!--alex ignore special-->
This week, we have an **Ember Octane Special Edition** for you!

<!--alex ignore special-->
In this special we would like to tell you as much as possible about this new Ember edition. So throughout this post you will find useful information to help you get the most out of Ember Octane.

> Octane is modern Ember, and I’m psyched that we got it over the finish line. Have fun building apps! ~ _Yehuda Katz [(@wycats)](https://github.com/wycats)_

What is the Octane Edition? 🙋‍♀️🙋‍♂️,
Community Feedback from Outdoorsy 👏,
How to migrate to Ember Octane 🐹🏗️,
Conquer Octane with The Ember Atlas 🗺🌍,
Octane at EmberConf 2020 📢,
Where can I learn more 🤓

READMORE

---

## [Section Title in Title Case 🐹](#section-url)

<change section title emoji>
<consider adding some bold to your paragraph>

<add your name to author list, top and bottom>
<add blurb and emoji to "SOME-INTRO-HERE">

---

## [What is the Octane Edition? 🙋‍♀️🙋‍♂️](https://blog.emberjs.com/2019/12/20/octane-is-here.html)

Ember Octane introduces the idea of editions. Let's look at what an edition means in Ember and what features you can find in the Octane edition.

### What is an Edition?

In Ember, an [edition](https://emberjs.com/editions/) represents a **cohesive programming model** and can focus on a particular theme. For example, the Octane edition is focused on productivity and performance!

Having editions helps you and the Ember teams in many ways:

1. You can see the big picture of how features work together. Before editions were introduced, you might have had to stay on top of RFCs and release notes to understand why a feature was added or removed.

2. For people who don't follow Ember closely—that may be you, or people in the wider JavaScript world—it was <!--alex ignore easy-->easy to miss the significant improvements that happen over time. Editions help us market *tour de force* in Ember.

3. Editions mark an opportunity to update Ember documentation, idioms, addons, and tooling (Ember Inspector, blueprints, codemods, and error messages). The end result is a cohesive, polished experience for you!

### What Features are in Octane Edition?

Many new features cohere to form **a new component model and a new reactivity system** for Ember. These two big changes are keystone to Octane's ergonomic improvements.

You can find the full list of features in the [Ember Guides](https://guides.emberjs.com/release/upgrading/current-edition/#toc_what-is-ember-octane). We'll highlight a few major ones below.

1. **Glimmer components** offer a greatly simplified API, for both template and backing class. Say hi to outer HTML semantics and namespaced arguments!

2. **Modifiers** let you interact with the DOM—animate this element, scroll to that element, autofocus on the first form input, etc. Modifiers work on *any* element.

3. **Tracked properties** simplify syncing the DOM with JavaScript changes. You no longer need to write and maintain dependency lists.

---

## [Community Feedback from Outdoorsy 👏](https://www.outdoorsy.com)

Wondering about who has been using Ember Octane features in production?

We’ll spend some time over the next several issues focusing on projects and teams who are using Ember Octane in their apps.

Today’s focus is on [**Outdoorsy**](https://www.outdoorsy.com), a peer-to-peer marketplace that connects RV and camper van owners with campers encouraging them to get into the great outdoors. Outdoorsy maintains three large-scale Ember apps for their flagship web product.

The developers at Outdoorsy have been using Octane features in production since September and have reportedly had a super enjoyable experience. [Jaco Joubert @jacojoubert](https://github.com/jacojoubert), a Front-End Engineer at Outdoorsy, says "Octane has allowed us to build highly interactive experiences that are well tested in an unbelievably short time. Leveraging Octane we rebuilt our entire [search experience](https://www.outdoorsy.com/rv-search) from the ground up in less than five weeks, something which would have taken orders of magnitude longer before."

Outdoorsy's Ember app is a particularly nice highlight of what's possible in an Ember Octane upgrade experience. The app was written in classic Ember style over the last 4 years or so, and is large enough that a team of 26 developers works on it (about half of whom are focused on the frontend). The app is actually a monorepo of several Ember apps and addons and employs a rehydrated Ember Fastboot app for its public facing pages for SEO purposes.

As with any upgrade of an app this size, there were pain points, but the Outdoorsy team took advantage of the opportunity of being together at their fall engineering summit (the team is distributed, and many work remotely) to tackle the upgrade over the course of a week.

The new Octane syntax took a bit of getting used to, particularly around how to make use of tracked properties in place of computed properties, but the team is enjoying using the new auto-tracking system and class based components in many places throughout the application, and plans on incrementally updating all of their components over time.

Almost all new work that gets done on the application is written with Glimmer components and in a clean and idiomatic Ember Octane way.

<!-- alex ignore mental -->
Some of the big benefits that the Outdoorsy team experienced from Octane are a simplified mental model of how Ember works, improved code readability, and easier reasoning about what context a state is derived from. Not having to reference several files to determine where a property is initially defined was definitely a boon to developer productivity.

It’s great to hear that Octane is working really well in a production application at the scale and complexity of Outdoorsy’s.

We know there are lots of other great examples of Octane being used in the wild. If you’d like to share your experiences, please feel to reach out to the Ember Times team.

---

## [How to Migrate to Octane 🐹🏗️](https://guides.emberjs.com/release/upgrading/current-edition/)

<!--alex ignore nuts-->
Ember Octane represents a big shift in Ember's syntax, features, and mental models. There is, however, no need for a stop-the-world migration, Octane provides an opt-in method of migration where you can apply each core feature enhancement incrementally.

If you are migrating an existing Ember application to Octane we have an excellent list of resources to help you out:

- [The Ember Guides: Octane Update Guide](https://guides.emberjs.com/release/upgrading/current-edition/)
- [The Ember Octane vs. Classic Ember Cheat Sheet](https://ember-learn.github.io/ember-octane-vs-classic-cheat-sheet/)
- [Ember Atlas Recommended Migration Order](https://www.notion.so/Atlas-Recommended-Migration-Order-a22f948a7cce4e01896d674f727bee74)

Whatever you end up doing, you won’t have to do it alone as members of the community have generously contributed [numerous codemods](https://github.com/ember-codemods) to help us to migrate efficiently.

- [Angle Brackets Codemod](https://github.com/ember-codemods/ember-angle-brackets-codemod)
- [Tracked Properties Codemod](https://github.com/ember-codemods/ember-tracked-properties-codemod)
- [Native Class Codemod](https://github.com/ember-codemods/ember-native-class-codemod)
- [No Implicit This or {{foo}} to {{this.foo}} Codemod](https://github.com/ember-codemods/ember-no-implicit-this-codemod)
- [ES5 Getter Setter Codemod](https://github.com/ember-codemods/es5-getter-ember-codemod)
amyrlam marked this conversation as resolved.
Show resolved Hide resolved
- [Template Colocation Migrator](https://github.com/ember-codemods/ember-component-template-colocation-migrator)

If you need help along the way, visit the [Ember Community chat and forums](https://emberjs.com/community/).

---


> Ember’s staying power comes from the energy and dedication of our community, and the Octane release is a great example of how the community can come together, agree on a plan, and execute to a high-level of polish. ~ _Edward Faulkner [(@ef4)](https://github.com/ef4)_

## [The Ember Atlas 🗺](http://emberatlas.com)

The Ember Atlas is an unofficial resource for Ember curated by various people in the Ember Community. It includes best practices, upgrade guides and more! The Ember Atlas is built to be a Wiki for Ember for various content that isn't in the guides yet or won't ever make it in.

To get started it is recommended to read the [Introduction](https://www.notion.so/Introduction-d11ec02706d74eab960b3e2b11494bc7) which explains what The Ember Atlas is.

Of particular interest today is the [Ember Octane Upgrade Guide](https://www.notion.so/Ember-Octane-b8ad64b7adf74218942fc69ead7b6892). This section includes information to help Ember developers upgrade from Classic apps/addons to Octane ones.

Some notable parts of the upgrade guide:

- .... Need to finish
<consider adding some bold to your paragraph>

<add your name to author list, top and bottom>
<add blurb and emoji to "SOME-INTRO-HERE">

---

## [Section Title in Title Case 🐹](#section-url)

<change section title emoji>
<consider adding some bold to your paragraph>

<add your name to author list, top and bottom>
<add blurb and emoji to "SOME-INTRO-HERE">

---

## [Section Title in Title Case 🐹](#section-url)

<change section title emoji>
<consider adding some bold to your paragraph>

<add your name to author list, top and bottom>
<add blurb and emoji to "SOME-INTRO-HERE">

---

## [Octane at EmberConf 2020 📢](https://emberconf.com)

With [Ember Octane](https://blog.emberjs.com/2019/12/20/octane-is-here.html) released it is not a surprise that it’s also a hot topic for [EmberConf 2020](https://emberconf.com/#/speakers).

If you want to [listen and talk to people](https://emberconf.com/#/speakers) about Octane, EmberConf in Portland, OR is the place to be. The 16th till 18th of March will be filled with awesome talks by [Godfrey Chan](https://github.com/chancancode), [Suchita Doshi](https://github.com/suchitadoshi1987), [DanMonroe](https://github.com/DanMonroe) and many others.

It’s also a nice place to meet up with your Ember-friends and learn about many more topics. For more information, check the [EmberConf website](https://emberconf.com) and join the #ember-conf channel on Discord.

---

> I'm excited because I think Octane is easier to teach. That's great for both companies who hire non-Ember developers and for self-motivated beginners. With ember-auto-import in the app by default, Ember also plays nice with the broader JavaScript ecosystem. You can npm install the libraries you like, and they work without extra effort. ~ _Jen Weber [(@jenweber)](https://github.com/jenweber)_

## [Where Can I Learn More? 🤓](https://guides.emberjs.com/release/)

If you want to try out Ember Octane, you might want to learn more about the new APIs and best practices for
building modern Ember apps. In this regard we highly recommend the following learning resources to you.

### Getting Started

- [The official documentation - Ember.js Guides](https://guides.emberjs.com/release/)
- [The official beginner's tutorial - Build the Super Rentals app](https://guides.emberjs.com/release/tutorial/part-1/)
- [The official API reference - Ember.js API Docs](https://api.emberjs.com/ember/release)

### Octane Core Concepts

- Octane Core Concepts Blog Series by [Chris Garrett (@pzuraq)](https://github.com/pzuraq)
- [Part 1: Native Classes](https://blog.emberjs.com/2019/02/11/coming-soon-in-ember-octane-part-1.html)
- [Part 2: Angle Brackets & Named Arguments](https://blog.emberjs.com/2019/02/19/coming-soon-in-ember-octane-part-2.html)
- [Part 3: Tracked Properties](https://blog.emberjs.com/2019/02/26/coming-soon-in-ember-octane-part-3.html)
- [Part 4: Modifiers](https://blog.emberjs.com/2019/03/06/coming-soon-in-ember-octane-part-4.html)
- [Part 5: Glimmer Components](https://blog.emberjs.com/2019/03/14/coming-soon-in-ember-octane-part-5.html)
- [Most Common Mistakes Using Octane and How to Avoid Them](https://medium.com/ember-ish/the-most-common-ember-js-octane-mistakes-and-how-to-avoid-them-c6420e1b0423) by [Jen Weber (@jenweber)](https://github.com/jenweber)
- [Bringing Clarity to Templates through Ember Octane](https://simplabs.com/blog/2019/12/20/clarity-in-templates/) by [Ricardo Mendes (@locks)](https://github.com/locks)
- [Ember Octane Fundamentals Course on Frontend Masters (paid subscription)](https://frontendmasters.com/courses/ember-octane/)

### Migrating Ember Apps

- [Rewriting Apps in Ember Octane](https://crunchingnumbers.live/2019/12/23/rewriting-apps-in-ember-octane/) by [Isaac Lee (@ijlee2)](https://github.com/ijlee2)
jenweber marked this conversation as resolved.
Show resolved Hide resolved
- [The Ember Octane vs. Classic Ember Cheat Sheet](https://ember-learn.github.io/ember-octane-vs-classic-cheat-sheet/)
amyrlam marked this conversation as resolved.
Show resolved Hide resolved


> Octane provides a very gentle on-ramp and lets you learn and grow into the framework as the needs arise in your app. You start with HTML templates, then extract pieces into template-only components for clarity, add arguments for reusability, add a js class to add behavior, add a service for shared functionalities, install an addon for more cool stuff, etc. I’m excited to see all of theses pieces coming together and finally ready to teach the version of ember we had envisioned. Check out the new tutorial to see the difference for yourself! ~ _Godfrey Chan [(@chancancode)](https://github.com/chancancode)_

---

## [Contributors' Corner 👏](https://guides.emberjs.com/release/contributing/repositories/)

<p>This week we'd like to thank our siblings for their contributions to Ember and related repositories! 💖</p>

---

## [Got a Question? Ask Readers' Questions! 🤓](https://docs.google.com/forms/d/e/1FAIpQLScqu7Lw_9cIkRtAiXKitgkAo4xX_pV1pdCfMJgIr6Py1V-9Og/viewform)

<div class="blog-row">
<img class="float-right small transparent padded" alt="Office Hours Tomster Mascot" title="Readers' Questions" src="/images/tomsters/officehours.png" />

<p>Wondering about something related to Ember, Ember Data, Glimmer, or addons in the Ember ecosystem, but don't know where to ask? Readers’ Questions are just for you!</p>

<p><strong>Submit your own</strong> short and sweet <strong>question</strong> under <a href="https://bit.ly/ask-ember-core" target="rq">bit.ly/ask-ember-core</a>. And don’t worry, there are no silly questions, we appreciate them all - promise! 🤞</p>
</div>

---

## [#embertimes 📰](https://blog.emberjs.com/tags/newsletter.html)

Want to write for the Ember Times? Have a suggestion for next week's issue? Join us at [#support-ember-times](https://discordapp.com/channels/480462759797063690/485450546887786506) on the [Ember Community Discord](https://discordapp.com/invite/zT3asNS) or ping us [@embertimes](https://twitter.com/embertimes) on Twitter.

Keep on top of what's been going on in Emberland this week by subscribing to our [e-mail newsletter](https://the-emberjs-times.ongoodbits.com/)! You can also find our posts on the [Ember blog](https://emberjs.com/blog/tags/newsletter.html).

---

That's another wrap! ✨

Be kind,

Chris Ng, Alon Bukai, Jessica Jordan, Anne-Greeth van Herwijnen, Isaac Lee, the crowd and the Learning Team