Blog 1day

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<p>
It’s the first day of the yearly three-day event gathering Ember developers from all over the world. It was great to see all the people who you constantly come across in the open source community of Ember and Ember-addons. There were also many people who were present at EmberCamp Chicago held at the Chase Tower. The two trainings I have taken are related to Ember’s upcoming Octane edition. 
1.	Modern Ember with octane
2.	Ember Octane with TypeScript
Modern Ember with Octane has covered a lot and most important topics that will be introduced with the new edition. Some of them include 
•	Angle Brackets
•	Native Classes and decorators
•	Glimmer components
•	@args and ‘this’ in HBS and so on
Eric Bryn has tried to talk about it and get everyone in the room a clear idea of what is the scope every single important feature. Some of the interesting additions seem to be related to the component object of Ember. The size of this is being amazingly reduced so as to result in better performance. Every single feature is very well thought so it helps performance and the component operation directly or indirectly. I will communicate some of the main points and go into better details as I learn more for the next two days.
Angle Brackets and Glimmer components
-the ‘this’ keyword is being introduced to be used in component templates for using any of its arguments(properties) and this argument will have a decorator @ while assigning a value to it in the template.
-all components will start with an uppercase letter in this syntax 
-there are some other syntax changes across various parts of hbs templates too
Native Classes:
-the aim of this is to get the component.js file to look and operate like a plain old JavaScript rather than using a layer of Ember over it
-decorators are being added for computed properties, actions, services, model attributes and so on to reduce the size of the component object
- this not only helps the rendering speed to get better but also reduces the overall size of a library
Tracked properties: This seemed to be one of the most desired feature the ember community has been asked for. Because this feature not only simplifies the source code but also holds the capabilities of multiple existing features of Ember at one place. For example, tracked properties can be used for computed properties and the amount of time used in re-rendering can be reduced by a lot. The tracking goes to all the levels down the hierarchy where the original property exists once a property is marked with @tracked. There were some gotchas and confusions around this but as the day goes on tomorrow and the day after, I will clarify a lot of questions.
There were two live exercises where we were give ember components holding the code with present versions and asked to convert them by using the above features. It was not too confusing to do it however. For example, using angle bracket instead of curly braces, using native classes for defining a Controller and adding action decorators. Also adding decorators to ember data and so on. 

As part of the Ember octane with typescript, a lot of the lecture consisted of talking about what was Typescript and how is it different from JS. Most of the talk was explaining about the various “types” and shapes in TS. This was very interesting since I did not do some homework about this prior to the talk like I did for the Octane features. However, since this talk also led to how TS is going to be a part of Octane(I still have lot of unanswered questions on this so further details will be mentioned as the event goes on), Chris Krycho has given a much better idea of how it might look. He live coded a service by converting it from JS to TS. It was very interesting to see how so many “types” can be assigned to every single property, action, method present in the service or a component. This insight into TS was definitely a good start but I will be providing more info on this in future posts.

On the whole, the trainings and workshops were so informative and productive, it definitely did not remind high school as it was very interesting. The workshop in fact was much interesting as it was an exercise and hands on coding to convert a classic ember component to octane component. I strongly suggest everyone reading this to look into octane features articles in Ember blog before you hear anymore details on this. 

</p>
<br>
<br>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}