Lesson 9

Using external libraries

13

⚠️ This tutorial uses an old version of Ember. Some things might have changed!

In this chapter, we're going to show how to import external libraries to use in your Ember app.


We will first show the easy way of doing it, using an Ember Addon, and then the harder (although still pretty simple) way of importing a library that's not customized for Ember specifically.

Using an Ember Addon: ember-moment

The first thing we would like to fix in our app is those ugly timestamps. Instead of showing the raw time format, we would like to convert it to something more user friendly, and relative to the current time (e.g. "five minutes ago" instead of Mon Jun 08 2015 11:30:27 GMT+0200 (CEST))


Luckily, there's a great library called Moment.js which does exactly that. Even better, some talented developers have made an Ember Addon for it.


This should be the first thing you do whenever you need some external library: check if there's a corresponding Ember Addon. Seriously, it can save massive amounts of time and there's a great website for browsing through all of the existing addons.


emberaddons.com is great for finding the Addons you need!


Like all Ember Addons, ember-moment can be installed with a simple command in your terminal:

As you might remember, you have to restart the server when installing an addon in order for Ember to pick it up, so go ahead and do that first before changing any code.


Now let's update our chirp-message-component so that it uses the moment addon. The only thing we need to do to make the timestamp relative and user-friendly is to add the keyword "

app/components/chirps-list/chirp-message/template.hbs


There it is! Wasn't that easy?


We'll also do the same for the join date on our profile page (near the bottom of the file):

app/user/template.hbs

As you can see, Ember addons are incredibly useful, and often just require some Handlebars markup. No need to manually import JavaScript files and wrestle with the code implementation, it just works!

Using "regular" libraries

What if the library you need doesn't have an Ember addon? In this case you're going to have to follow this workflow:

  1. Install the library through Bower

  2. Import it through the file ember-cli-build.js

  3. Edit the .eslintrc.js-file (if needed) to avoid errors

Let's try this out by importing SweetAlert (a simple library for showing error messages to the user).


You could download the library's code manually from GitHub and place it in your vendor-folder, but since the library exists on Bower, it's preferable to download it from there so that you can easily keep track of the version number.

You should now be able to find the library at bower_components/sweetalert. The next step is to import the necessary files into the asset compilation process. Remember, Ember compiles and minifies all your JavaScript into one "super-file" (it also does the same for your CSS), so we need to specify that we want SweetAlert to be part of that build process. This is done in ember-cli-build.js:

ember-cli-build.js

Again, restart the server so that Ember's build process can detect our new files.


Now we should be able to use the library! The interaction we want is that when the user clicks on the "What are you doing"-button (on the "Home"-page), an alert saying that the feature isn't available yet should appear.


To do this, we'll just add a simple {{action}} to our button in the status-update component. This will trigger a certain function when the user clicks on the element:

app/components/status-update/template.hbs

All your actions must be defined inside an "actions"-object in your component file:

app/components/status-update/component.js


If you go back to the browser and click on the button, it should work as expected.


Everything is good, except for one little thing. If you go back to your terminal and check the window that's running your Ember server in the background, you should see an error message like this:



This is because SweetAlert, like many other JavaScript libraries, has added a global function (called "sweetAlert"), which ESLint doesn't know about.


To fix this we only need to add the function name in the hidden .eslintrc.js-file at the of your chirper-directory:

.eslintrc.js

Restart the server once more and the problem should be gone.


Now you know how to use external libraries in your Ember project. In the next lesson, we're going to work with forms.

Comments

Brian Frisch

Hi. What if the library is written with ES6 syntax. I'm trying to use Bootstrap 4, which has been rewritten in ES6, and it seems to cause trouble with this approach.


I'm getting:


Uncaught SyntaxError: Unexpected reserved word


In their alert.js on the first line, which reads:


import Util from './util'


Is there a way to include a library that has been written in ES6?


Thanks.

Brian Frisch

I'm guessing that I need to transpile this library in some way between importing it in ember-cli-build and serving it in the browser, but I'm not sure how to make ember-cli-build transpile it.

Manvendra Singh

@brianfrisch It's written in ember-cli-build.js file as a comment. Which reads as: If the library that you are including contains AMD or ES6 modules that you would like to import into your application please specify an object with the list of modules as keys along with the exports of each module as its value.

profile/avatar/default
Andreas

Didn't find a dist folder in sweetalert but

profile/avatar/default
Andreas

app.import('bower_components/sweetalert/docs/assets/sweetalert/sweetalert.min.js'); app.import('bower_components/sweetalert/src/sweetalert.css'); worked as well

Martin Doktár

`ago` helper has been renamed to `moment-from-now`

profile/avatar/default
andrew

Thanks for that, you saved me a lot of time searching for this.

Thomas Ulman

I can't see the jsintrc file and when I search the project directory seems to be about 5 or so similar files

Tristan Edwards

@thomas-ulman: Ember CLI has recently been updated to use ESLint instead of JSHint. I've updated the lesson now to reflect that change!

Alec Rooney

My SweetAlert worked, but did not look like this, it looked 'unstyled' and appeared under other elements (not as popup). I added this line:


@import "bower_components/sweetalert/dist/sweetalert"; to my app/styles/app.scss and it works now. Not sure if that is correct, but works for me.

Daniel Jeffery

Had the same issue, that worked for me too - weird!?


Would love to know what's going on there.

Malik Dixon

Question? Was the Sweet Alert problem fixed or is there a work-around to fix the problem

Tristan Edwards

@malikdixon47: Updating ember-component-css to the latest beta version should fix the problem. So try doing ember install ember-component-css@beta

Tristan Edwards

@alecrooney: @danieljeffery: Hey guys. It seems like it's a conflict with Ember Component CSS and the latest Ember CLI. I opened an issue about it here 2 weeks ago, and it seems like they are working on it!