Production Build Q&A

[00:00:00]
>> Mike North: Yes sir.
>> Speaker 2: Just was gonna ask, do you know about how much of that performance is coming from Fastboot? Versus like, cuz I'm sure that's a big improvement for that first pane.
>> Mike North: Absolutely, so first of all the absolutely the first meaningful pain, that is definitely coming from Fastboot.

[00:00:18]
And if we were to look at performance time line here, you can see that we're like, that first screenshot's coming in at, yeah. Like if this is 500 milliseconds, and this is 250, you can kinda see it start to render here. There, right there you can see that this is the server rendering it.

[00:00:42]
And then this is the client where all of the images are finally landing. But we get a very, very, very good head start from Fastboot. And part of the strategy here is making it to server rendering is easy for anyone to set up. And that is not the case for a lot of other technologies where you're assembling together sort of your own framework.

[00:01:07]
And you don't necessarily have guarantees that all of those things will play nice in a node environment. But the aim is, as long as you're not using browser specific API's like local storage, you should be able to install Fastboot and it should just work.
>> Mike North: Other questions, yes?

[00:01:30]
>> Speaker 3: Can you point us to any additional insight or documentation on how you put together that server script?
>> Mike North: Good question there, cuz I just got official confirmation that what I'm doing is not hokey in any way, and you should be able to depend on this being a thing of the future.

[00:01:49]
So the first thing is if you happen to have a folder in your project called server, and that happens to have an index.js file and you happen to be exporting an express server of some kind from that file. That will be used as, or it'll be run as your Ember CLI development server.

[00:02:18]
So we run Ember Serve, and it's just sort of tacking on to whatever I export from here. If you're hitting static assets, that's what's gonna be used. Ember CLI just stacks another Express middleware on top of whatever I've got here. So that's how I was able to sort of have additional things in general running on top of Ember Serve.

[00:02:42]
In terms of the development tool that I'm using for the API for this workshop.
>> Mike North: It's called JSON server, and I absolutely love this thing. So the whole point of this is a fake rest API with 0 coding in less than 30 seconds. This is where we're just porting it to this db.json file and letting it rip.

[00:03:09]
And that is the simplest implementation here. Or you just, you'd be able to just point it. Or you could, you don't even have to write any code. You could just do something like that and it works. Now I've had to massage it slightly so that we have some of those nested resources.

[00:03:25]
Like when you request a team, you always get the list of channels and the records are embedded right in that response. But in total, it's like less than 60 lines of code. And most of that is just URL remapping, and this is like the created at field being added to a record.

[00:03:46]
It has been a great tool to use. So, I am going to recommend it to my colleague instructors as a good thing to consider as a way to have a reproducible fullstack app where you don’t have to depend on some other server being up. Because things happen. Conference WiFi is a workshop killer.

[00:04:11]
Yes
>> Speaker 4: So if I'm pointing in the production API though, then I could probably delete a lot of the code in this file
>> Mike North: If you're pointing at a production API, but you still want to have something else run with Ember Serve-
>> Speaker 4: Just to get Fastboot in production

[00:04:25]
>> Mike North: Sorry, Fastboot in production, that is run a different way. That is ProdServer.js. There you go.
>> Speaker 4: [CROSSTALK]
>> Mike North: Ember in production. ProdServver.js. So let me get rid of this sidebar. So we've got an express server that is designed, that is part of Fastboot app server. I am providing that to this setupApiServer.

[00:04:59]
So even when we're running in prod mode, I'm still grabbing that JSON server thing that I just talked to you about. So that's all this does. And then this is setting it up by saying, look to the dist folder, use gzip compression, run on port 4000. And then start it up.

[00:05:17]
But, this is it. It's all it takes. Not too much, and we maintain this as the official Ember project. So, you can be sure that it will always be up to date with Fastboot.