00:00:00.199
For the first talk this morning, we have Robert Jackson. You can see how good I can type on screen here. Oh yes, I'm sure you do.
00:00:13.860
Alright, so before we get started, I want to know how many in the room have used Ember before. How many have not used Ember? Just for a hint, it should be everyone else.
00:00:22.140
Okay, good, sounds good. A few things about the talk: The talk is not going to be about why Ember is actually the best framework to use. It is, but that's not the topic today.
00:00:34.739
The talk is more about how a Rails developer can get into using Ember, one of the ergonomics, how it works, the actual logistics of making it work, and a little bit about the horrors of JavaScript development.
00:00:42.600
First, a little bit about myself. I am a core team member of Ember, which is why we're not going to get into a framework shootout, because it's not exactly an unbiased opinion. I do way too much open source, to the point where I'm forbidden from taking any new hobbies unless I give up any projects on GitHub.
00:01:02.460
I work at Which Wich; it's a great place to work and we are hiring. I'll put us on the little board out there. Mike mentioned this, so come ping me afterwards if you want to talk about that.
00:01:26.580
Next, I want to make sure to always thank my family. I couldn't be here, and I couldn't do this stuff without them and their support. It's a lot of work to get up and do these things and come to these conferences. We should all be thankful for our families and the support they give us.
00:01:42.210
I also want to thank the organizers of the conference, particularly Pat Rocket, for putting on this event. This is my third Ancient City Ruby (ACR); I missed last year, but it has always been a great conference.
00:02:02.800
A few points from this year's ACR: This is the first ACR that I attended where any Lindeman did a killer job live coding this talk. You should really watch it; it was incredible.
00:02:15.930
ACR is also where I met someone I had no idea was a significant figure in the community. We sat in the back of the room and geeked out over drones for about 15 minutes. He was a huge influence on me and taught me that you can do open source without being jaded.
00:02:40.690
Ben's not here, but you should all troll him because he told me yesterday that this is why he's using Vim. That's my guess.
00:03:06.700
So yeah, that's got to be it. I think this is going to be fun now. I want to point something out: notice that the only one that actually has the proper tools is the Emacs user. See that? Notice? Okay, it's a period.
00:03:32.160
This is a great city. It's always a lot of fun to come back. You should really enjoy it if you're from the area. For those from Florida, you have no idea. This was my driveway on Monday morning, so pretty crazy. We had like seven inches of snow up in the Providence area.
00:04:02.040
I got to hop on a plane to come down to sunny Florida on Wednesday morning, and it was great. A little bit about myself, I started out not in web development. I began in standard application development.
00:04:21.840
I did that for a long time, mostly in Visual Studio. I did Visual Basic; yes, I’m that guy. I then moved on to C# and those kinds of things, which feel more respectable to most of you.
00:04:44.820
Then right around when Rails 1 came out, I started poking around at Ruby and fell in love with the language. It made my life so much easier; the conventions and ergonomics made things massively better than everything I was used to before.
00:05:22.470
In about 2014, I started using Ember mostly because our Rails app had specific compliance requirements. We had to transition to a single-page app style, and based on the perspective of Rails, I picked Ember without really evaluating a ton of options.
00:05:49.560
At that time, there weren't a lot of options; there was Angular and Batman.js, if you remember those. Batman was totally dead by now, but you can tell me later. So I got into Ember around then and have been working with it ever since.
00:06:06.690
My first few commits in Ember were all documentation, and at that time, the build tooling was all in Ruby. I've rewritten the build tooling multiple times now to change the way the project builds, and now, of course, it's JavaScript built.
00:06:42.150
Now, let's talk for a minute about the general idea of single-page apps. The idea is that, as opposed to a typical server-rendered app, it feels more like an actual application.
00:07:07.510
Single-page apps have much more state management, events, and all user interactions as opposed to the typical server-rendered HTML page, which relies on request-response.
00:07:24.169
With a typical app, when you click a link, you send a request, and the server responds by rendering more HTML. These days, you can use things like Turbo Links to make that feel snappier.
00:07:51.780
However, even with Turbo Links, you're essentially introducing a bunch of additional state management into your app whether you realize it or not.
00:08:06.329
Turbo Links swaps in new DOM elements from the next page over, but it doesn't clear your JavaScript state. If you've done anything halfway interactive with JavaScript, that state is still around.
00:08:19.130
You have to do a lot of work to reset your application's state, which can trick you into thinking you're not doing state management at all.
00:08:36.580
Another issue I commonly see is developers sprinkling jQuery over different pages, leading to a deeply nested and complex structure that is challenging to debug and manage.
00:08:59.160
In my experience, single-page apps are better for managing that complexity. Here are a few examples of real applications, all of which are single-page apps, that feel like real applications.
00:09:25.580
This includes PlayStation Now, Apple Music, Heroku Dashboard, and Twitch, which you all might be familiar with. The experience of these apps is quite superior to just working with server-rendered HTML.
00:09:58.780
It's also quite straightforward to set up an app to be locally installable for desktop or mobile. Tools like Cordova can nicely wrap an Ember app, and there are great add-ons and tooling to support that.
00:10:33.700
You can also create an Electron-style app to install on desktop platforms. Overall, there's a wealth of great tooling available.
00:10:53.560
Now, let's talk about what it feels like to develop in Rails. This was probably the deciding factor for me when I moved from ASP to Rails—the excellent developer experience.
00:11:35.300
The Rails setup feels like someone actually thought about the developer experience, rather than just handing you a bunch of random steps to follow.
00:11:55.670
We've all hopefully done this problem: install Rails, generate a new project, go into the project, boot up the server, and it just works.
00:12:19.990
You get a really nice splash screen as of Rails 5: 'You made it! You have arrived! Welcome, join us!'
00:12:38.520
Then you can generate a controller, which spits out some code, and you can easily modify your routes to point to the welcome index.
00:12:52.940
This whole experience just works, and you feel good about it. You know you can run tests with just one command, which simplifies the testing process significantly.
00:13:10.039
Let's talk about JavaScript development. We've all seen the delightful nuggets that JavaScript has to offer. The good parts are much smaller than the definitive guide.
00:13:35.660
These wacky things, like how NaN isn’t equal to NaN, really don’t make sense. Each language has its quirks, but I find JavaScript has some real doozies.
00:14:07.780
The dependency management in Node can be a nightmare. It's reminiscent of early Rails days when you had to install nightly builds of gems globally while each project required differing versions.
00:14:45.859
Bundler came along and solved that issue; it allowed all projects to have the appropriate dependencies. However, in JavaScript, that foundational approach hasn’t been adopted.
00:15:14.930
Now when you go into a Node project and run 'npm install,' you may find a dependency is missing that your collaborator assumed was present.
00:15:46.600
These problems can happen anywhere if someone unpublishes a gem, but the Node package management system often ends up being a giant pain in the butt.
00:16:47.750
Now let's talk about developing in an Ember app. First, you would install Ember CLI, the command line tool for building Ember apps. You create a new project, change directories into that project, and then run the server to see it in action.
00:17:28.780
You will see a nice splash page with a welcome message and links to the guides. From there, you can generate templates, controllers, routes, or run tests, which is quite similar to Rails.
00:18:01.410
This familiarity makes the experience feel unified; Ember has a comparable setup to Rails. You can generate the base controller and return a welcome page in a similar manner.
00:18:31.290
Once you've generated your components in Ember, they each have their own JS file where you can define logic, properties, and lifecycle hooks. Each component interacts seamlessly as they render on the screen.
00:19:08.320
In this case, assuming three rentals, we'd have three components representing different rental properties. Each component handles its own data management and interactions.
00:19:30.230
So, now you’re all experts in Ember! Let's move into integrating Ember with Rails and see how to build a full stack application.
00:19:54.340
For our demo, we’re going to use Rails, Ember CLI, and the Ember CLI Rails gem, which helps integrate the two. This setup allows us to combine the strengths of Rails and the streamlined development Ember offers.
00:20:25.830
As we set everything up, you will see how easy it is to get Rails 5 with Ember up and running, even skipping Turbo Links for the demo.
00:20:55.190
After installing the necessary gems and setting everything up, we'll create a Rails directory where the Ember app resides, making it convenient to manage everything in a single repository.
00:21:23.900
Next, we navigate to the frontend directory and install the Ember CLI Rails add-on. This add-on works by integrating Ember CLI's lifecycle hooks to create a smooth development experience.
00:21:55.160
Now, we mount the Ember app using Rails. This means we'll be able to serve the Ember app along with our Rails app, allowing us to leverage the Ember ecosystem in our overall project.
00:22:32.690
With this setup, the Ember CLI server will automatically start on development and proxy requests, giving you flexibility to use all the standard Ember tooling.
00:23:05.550
When you load the app in development, you'll see the Rails boot output, and once the build process is complete, you can see the Ember app load.
00:23:38.260
The integration allows for easy updates and hot reloading of your Ember app as you make changes, ensuring a fluid development experience.
00:24:20.890
After some iterations, this setup has matured to integrate the best of both worlds between Rails and Ember, allowing developers to maintain both applications seamlessly.
00:25:05.470
Next, we need to address testing. This setup supports easy testing between the Rails backend and Ember frontend so you can run integration tests effectively.
00:25:45.440
With this workflow, you can also adapt your tests to ensure that your application behaves correctly before deploying to production, so your integration testing is solid.
00:26:20.690
Running acceptance tests can help confirm the ReactJS app interacts as expected with the Rails backend, ensuring smooth transitions between actions.
00:26:57.260
In conclusion, today's talk shows that the Rails and Ember ecosystem can thrive together, allowing for robust development practices without sacrificing the developer experience.
00:27:29.450
Where can you go from here? Be sure to explore the Ember guides and API docs as these resources have been significantly improved. They are designed to enhance your learning experience.
00:28:01.720
Check out some great podcasts to stay up to date with what’s happening in the community, like Ember Weekend and Emberland, which have insightful discussions and updates.
00:28:29.270
Finally, dive into open-source projects that utilize Ember so you can see practical implementations and improve your skills further.
00:29:03.560
Now that you’re all experts, you can start your journey and take your skills to new heights.