Sessions is temporarily moving to YouTube, check out all our new videos here.

Ember Engines at Scale

Paul Abraham speaking at Ember London in November, 2016
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Hear how the British Gas team have begun decomposing their app into engines.


Today we'll be seeing about how we have delivered our engine with Ember Engine stuff. Before getting down to the whole implementation, we'll be seeing what is the Engine first. [00:25] Already Jamie explained a lot. Engine is a mountable and routable Ember application so we can mount and route Ember applications wherever you want. To be much clearer, we can see here. [00:39] This is an engine. We can see that it's mounted in two different applications and it has its own route, [inaudible]. This is the one. We have seen what is exactly the engine, so we'll be seeing why we're using Engine. [00:54] First one is isolation, shareable, seamless user experience. [01:02] Isolation, it has separate functionalities. It has its own namespace, registry, those kinds of things. We'll be seeing what is namespace and registry later. It has its own testable code, so it will be running in your isolated coding environment itself. [01:22] It's shareable. As it is isolated, it can be shareable wherever you want. For a seamless user experience, for example if you have two apps in your application, in your environment, if you want to go from one app to another app it's quite difficult because the user will be having a page load and it'll be going there. But with this engine, it will not be like that. It will be like a smooth experience, you can go navigate from one place to other. [01:57] I guess most of you have used add-ons. What is add-ons? Ember add-on? Anyone? Audience Member: [02:03] Plugins? Paul: [02:03] OK, Plugins. How it will be integrated with the application? Audience Member: [02:11] Add-ons are a dependency of the applications. Paul: [02:14] We can say it like that. When I'm talking about Engine drive, the first thing that came to my mind is "what is add-on, and what is the difference between add-on and Engine?" [02:30] Most of the time it seems like it's the same thing. There are some key difference points, like Engine contain its own directories or own boundaries into it. It's self-contained. Add-ons, it's not like that. [02:43] If we see add-ons, it will be tightly coupled with the application. If you're seeing route in an add-on, and if you're having the same route in your application, it will be merged. It will not be work that much proper. This can be solved using the Engine one. [03:09] Add-on, as it look like, is tightly coupled with the application, so it will be running once the application is loaded. Engine is not like that. You can call it whenever you want. [03:20] Seamless user experience, if you transit with the Ember Engine route right, it automatically calls the Engine mounted and the Engine itself. [03:34] Before getting started with the Engine drive, there are two different types of using the Engine. It is routable and route-less, and we can also have the Engine inside what we have in an add-on, like [inaudible] add-on and also a stand-alone add-on. We'll be concentrating only on the stand-alone Engine, because that what we used in British Gas. [03:57] There's an oddity in Ember CLI. There's a call that's Ember Engine with a namespace. You can create an Engine. Soon it will be coming up. Right now, to create an Engine, you have to use add-on way. You just need to call Ember add-on and your Engine name, and you have to install Ember Engine add-on into it. Then bang, the Engine will be getting started, ready to use. [04:23] A couple of things. You have to configure index.js by mentioning, "This is the engine, you have to get it from there -- from the add-on." Then you have to configure modulePrefix with config.js. [inaudible] config.js. [04:42] You have to create a new engine.js so that you can get whatever you want, whatever dependencies you want, how to communicate with external route, and those kinds of things. You can put it there. If it is a routable engine, just mention the route. Engine will take care of all the things. [05:01] You can put template, route, components, CSS, all the things in the engine itself. [05:08] We have configured something in Engine, so how can we use it in an application? Just add it into your package [inaudible] json, like this. Mount it wherever you want in the route. Call it in the application itself. [05:28] The best example for route-less Engine, it's a chat. Web chat, or a chat like that. You can use it wherever in your application you want. Route-less, you can call it. [05:41] It's demo time. Before getting into the demo, I just want to explain about what is the business requirement for us to do this Engine. [05:53] Once you're moving into a new home, we can enable to select gas, electricity based on your prices and those kinds of things. Then you'll be navigating into a new code route, then you'll be getting back into the home page. [06:13] We already have the price matching application, already live. So if you're going through the journey, then you have to go back to the price matching tool, then you have to come back. Those kinds of scenarios are there. [06:24] We don't want to do that, so we made Engine to mount and boot the app so that it can be usable across. Right now we're just not using the lazy-loading. This is a normal loading one. Once the lazy-loading is a stable-stable version, then we'll be using it. [06:44] This Engine has been used in the code app, also. Are you able to see this? [06:49] Actually, the requirement came after the Engine was born. We wanted to create a new app to use the same thing, so we thought whether we can go by add-on, to share it, but it's not seems to be that much good so either we have to a code the same thing there and here, but to maintain it would be costly, so we chose to go for Engine. [07:13] The challenges which we faced a lot when using Engine drive, first one is error loading. The Ember application will provide you with an index.js route or template. Then when the API is called, then it will be creating with that template. We tried that. Unfortunately, it was not working. [07:34] We thought we can raise it in the Slack channel. We went there, we raised it, and they said there is already an issue in that. "Right, we have seen it." We thought, "OK, we can contribute to that. We can start working on that." We thought like that. [07:50] They have released Ember 10.Beta.2-something, and in that they have fixed it. They are more faster, they are growing massive, and they are clean that. [08:03] Also we found the configuration of Engine, it's not that much clear in what cases we have to use -- we have two options to configure, either by service or either by model, like route. [08:17] It's depend upon the developers whether you want the service to configure the engine or you want model to configure the Engine, based on the location where you want to place the Engine. These are the things which we find more challenging for us. [08:28] [applause]