Lamin Sanneh – SitePointhttps://www.sitepoint.com
Learn CSS | HTML5 | JavaScript | Wordpress | Tutorials-Web Development | Reference | Books and MoreFri, 09 Dec 2016 19:00:14 +0000en-UShourly1https://wordpress.org/?v=4.4.2How to Integrate jQuery Plugins into an Ember Applicationhttps://www.sitepoint.com/how-to-integrate-jquery-plugins-into-an-ember-application/
https://www.sitepoint.com/how-to-integrate-jquery-plugins-into-an-ember-application/#commentsThu, 26 Nov 2015 21:00:12 +0000http://www.sitepoint.com/?p=119886With its ubiquity, jQuery still plays a vital role in the web development world. Its regular employment shouldn't be a surprise especially when using a framework like Ember. This framework has components that are similar to jQuery plugins in that they are both designed to have a single responsibility in your project.

In this article, we will develop a simple Ember component. This tutorial will showcase how to integrate a jQuery plugin into an Ember application. The component acts as a wrapper for the plugin, which shows a list of picture thumbnails. Whenever we click a thumbnail, a bigger version of it is displayed in the picture previewer. This works by extracting the src property of the clicked thumbnail. Then, we set the src property of the previewer to that of the thumbnail. The complete code of this article can be found on GitHub.

]]>https://www.sitepoint.com/how-to-integrate-jquery-plugins-into-an-ember-application/feed/7Understanding Components in Ember 2https://www.sitepoint.com/understanding-components-in-ember-2/
https://www.sitepoint.com/understanding-components-in-ember-2/#commentsMon, 02 Nov 2015 21:00:49 +0000http://www.sitepoint.com/?p=118321This article was peer reviewed by Edwin Reynoso and Nilson Jacques. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Components are a vital part of an Ember application. They allow you to define your own, application-specific HTML tags and implement their behavior using JavaScript. As of Ember 2.x components will replace views and controllers (which have been deprecated) and are the recommended way to build an Ember application.

Ember’s implementation of components adheres as closely to the W3C’s Web Components specification as possible. Once Custom Elements become widely available in browsers, it should be easily to migrate Ember components to the W3C standard and have them usable by other frameworks.

The Tab Switcher Application

[author_more]

To get an in-depth understanding of Ember components, we will build a tab-switcher widget. This will comprise a set of tabs with associated content. Clicking on a tab will display that tab’s content and hide that of the other tabs. Simple enough? Lets begin.

The Anatomy of an Ember Component

An Ember component consists of a Handlebars template file and an accompanying Ember class. The implementation of this class is required only if we need extra interactivity with the component. A component is usable in a similar manner to an ordinary HTML tag. When we build our tab switcher component, we will be able to use it like so:

{{tab-switcher}}{{/tab-switcher}}

The template files for Ember components live in the directory app/templates/components. The class files live in app/components. We name Ember components using all lowercase letters with words separated by hyphens. This naming is by convention so we avoid name clashes with future HTML web components.

Our main Ember component will be tab-switcher. Notice I said main component because we will have several components. You can use components in conjunction with others. You can even have components nested inside another parent component. In the case of our tab-switcher, we will have one or more tab-item components like so:

Creating the Tab Switcher Component

Let’s create a tab switcher component using Ember’s built in generator:

ember generate component tab-switcher

This will create three new files. One is a Handlebars file for our HTML (app/templates/components/tab-switcher.hbs), the second is a JavaScript file for our component class (app/components/tab-switcher.js), the final one is a test file (tests/integration/components/tab-switcher-test.js). Testing the component is beyond the scope of this tutorial, but you can read more about that on the Ember site.

Now run ember server to load up the server and navigate to http://localhost:4200/. You should see a welcome message titled "Welcome to Ember". So why isn’t our component showing up? Well, we haven’t used it yet, so lets do so now.

Using the Component

Open the application template app/templates/application.hbs. Add in the following after the h2 tag to use the component.

{{tab-switcher}}

In Ember, components are usable in two ways. The first way, called inline form, is to use them without any content inside. This is what we’ve done here. The second way is called block form and allows the component to be passed a Handlebars template that is rendered inside the component’s template wherever the {{yield}} expression appears. We will be sticking with the inline form throughout this tutorial.

This still isn’t displaying any content on the screen, though. This is because, the component itself doesn’t have any content to show. We can change this by adding the following line to the component’s template file (app/templates/components/tab-switcher.hbs):

<p>This is some content coming from our tab switcher component</p>

Now when the page reloads (which should happen automatically), you will see the above text displayed. Exciting times!

]]>https://www.sitepoint.com/understanding-components-in-ember-2/feed/4What’s New in Ember 2.0?https://www.sitepoint.com/whats-new-in-ember-2/
https://www.sitepoint.com/whats-new-in-ember-2/#commentsMon, 19 Oct 2015 20:00:47 +0000http://www.sitepoint.com/?p=117463This article was peer reviewed by Stephan Max. Thanks to all of SitePoint's peer reviewers for making SitePoint content the best it can be!

Ember is an JavaScript framework, based on the model-view-controller (MVC) pattern and used for creating single page applications. Recently, version 2.0 of the framework was released under the motto “Stability without Stagnation”. What this means is that Ember 2.0 didn’t ship with any new features, as those features intended for the 2.0 release (such as the Glimmer rendering engine) were already present in previous versions.

Ember 2.0 also removes many of the older APIs which had been deprecated in the 1.x versions. This means that if you can create an Ember 1.13 app which is free from deprecation warnings, the upgrade to 2.0 will be seamless. This is in stark contrast to the furor surrounding last year’s Angular 2.0 announcement.

The features intended for Ember 2.0 have been termed “precursor features” by the Ember team. So, for the rest of this article, I will be highlighting the major precursor features and how to use them. We will also examine some of the features intended for future releases.

If you would like to follow along, you’ll need to create an Ember project using the latest version of the framework. Show me how.

Precursor Features for Ember 2.0

Views

[author_more]

Views have been deprecated in favor of components. Consisting of two parts (a JavaScript component file and a Handlebars template), components are isolated by design and are better suited to reuse throughout your application (unlike views). A compatibility addon is available which will be maintained by the Ember team until version 2.6 of Ember. This is to help transition apps making heavy use of views to the latest Ember. Compatibility of this addon with Ember will stop at version 2.4. When building new Ember applications, developers should favor components over views.

ArrayController and ObjectController

ArrayController and ObjectController have been deprecated in favor of the generic Controller class. This is because they created some unnecessary confusion among developers and there was ambiguity about which controller type is generated by Ember if none is specified. With this deprecation, there will only be one type of controller.

]]>https://www.sitepoint.com/whats-new-in-ember-2/feed/5Getting started with Ember and Ember CLIhttps://www.sitepoint.com/getting-started-with-ember-and-ember-cli/
https://www.sitepoint.com/getting-started-with-ember-and-ember-cli/#commentsThu, 30 Jul 2015 20:00:20 +0000http://www.sitepoint.com/?p=111546Ember has gone through a lot of changes over the years. One of the biggest ones has been the introduction of the Ember CLI, a command line utility built for Ember. It combines several features including generators, minifiers, CSS preprocessor compilers, autoreload, and ES6 module loaders. This command line tool will help you reduce the time spent on setting up some of your tools such as Grunt and Gulp. We can say that it could be a good alternative to these tools for any of your brand new Ember projects.

In this article, you’ll learn how to build a simple contacts manager application using Ember CLI. This tutorial will be a bit different from the other articles about Ember I’ve published on SitePoint since they did not ship with Ember CLI. However, most of those concepts still apply, so I suggest you to take a look at them and follow on.

]]>https://www.sitepoint.com/getting-started-with-ember-and-ember-cli/feed/12Dependency Injection: Angular vs. RequireJShttps://www.sitepoint.com/dependency-injection-angular-vs-requirejs/
https://www.sitepoint.com/dependency-injection-angular-vs-requirejs/#commentsThu, 17 Jul 2014 19:00:22 +0000http://www.sitepoint.com/?p=85440If you have built large JavaScript applications before, chances are, you have faced the task of managing component dependencies. You can think of a component as a block of functionality. It may be a function, object, or an instance. The block chooses to expose one or more public methods. It may also choose to hide non-public functionality. In this article, we will look at two major libraries, AngularJS and RequireJS. We will analyse how they use dependency injection to share components across an application.

Short Story on Dependency Injection

Dependency injection becomes a necessity when you need an easy way to pull in one or more components into an application. For example, assume you have two components named database and logger. Assuming that the database component exposes the methods getAll, findById, create, update, and delete. The logger component only has one method, saveNewLog, in it's public API. Let's assume the logger component depends on the database component to function. Using dependency injection, we could pass in the database component as a dependency to the logger component during creation.

Just so you can visualize the dependencies better, I'll write it in code. Note that the actual syntax depends on the dependency injection library you use. Angular and RequireJS have different syntax, so the code below is a generic example and we'll get to actual representations of the two libraries in a bit.

As you can see, we are passing the database component into the constructor of the logger. The part of the application which handles the instantiation of the logger must provide it with an instance of a database component.

The Need for Dependency Injection

Now that we are more educated about what dependency injection is, let's identify what benefits it brings to the table. If you are an advocate of good JavaScript design, some benefits of dependency injection may be obvious to you. If they're not, let me explain a few of the general benefits. I believe these apply across the board whether you use AngularJS or RequireJS.

Testing Becomes a Breeze

Testing becomes much easier because you can provide mocked dependencies instead of real implementations.

Separation of Concerns

Dependency injection lets you separate the parts of your application so that each one handles a distinct job. In the above example, the database module is only concerned with dealing with a database. The logger module is only responsible for logging data, whether it is in a database, file, or the console. The benefit of this is easier swapping of dependencies. If we later decide that we need to use a file-based database instead of a traditional relational database, we just have to pass in a different module. This module just has to exposes the same API methods as the database module, and the logger module would continue to work properly.

]]>https://www.sitepoint.com/dependency-injection-angular-vs-requirejs/feed/9Improving Your Ember.js Workflow Using Gulp.jshttps://www.sitepoint.com/improving-ember-js-workflow-using-gulp-js/
https://www.sitepoint.com/improving-ember-js-workflow-using-gulp-js/#commentsTue, 01 Jul 2014 19:00:14 +0000http://www.sitepoint.com/?p=83860I am a big advocate of the Ember.js framework. I have seen a lot of Ember tutorials on the web, but most do not explain how to setup a build system to use with it. In light of that, I have decided to take it upon myself to explain that part of the worflow. Since its arrival, Gulp.js has become a hot topic in the discussion of JavaScript task runners. It is no coincidence that Gulp.js pops up in the discussion when a JavaScript project is mentioned. So, this article is going to show how Gulp can be used with Ember projects.

I will be making some assumptions in this article. I assume that you already have a basic understanding of how Gulp.js works and that you have setup a Gulp.js project on your own before. If not, please visit SitePoint's Introduction to Gulp.js for a refresher. The rest of this article will teach you how to create and configure common Gulp.js tasks with your Ember project.

A Typical Ember.js Workflow

I have worked on several Ember.js projects and I noticed that there are common requirements among them. These requirements involve the need to manipulate SCSS, CSS, JavaScript, and Handlebars code. Below are the requirements and a brief explanation of each.

SCSS Compilation

This involves the conversion of SCSS code into CSS.

JavaScript and CSS Minification

Minification is the process of reducing the size of a file by removing unnecessary white space. With CSS, this is usually done after converting SCSS code to CSS.

JavaScript and CSS Concatenation

Concatenation is the process of combining many files into one file. This is usually done to reduce the number of HTTP requests to a server. More files means more HTTP requests, which leads to longer download times. When concatenated, you need just one HTTP request. This is especially useful when serving files over a slow network connection, such as a mobile device.

File/Folder Watching

Tasks like minification, concatenation, and compilation can run be manually. However, they are repetitive tasks that quickly become tiresome and boring. Using the Gulp.js watcher task, you can setup a file watcher to watch your desired files for changes. When it detects a change, it will run one or more tasks in response to that change.

Handlebars Compilation

Handlebars is the default templating language of Ember.js. However, browsers cannot parse Handlebars code. Therefore, we need a way to convert Handlebars code to HTML. That's where Handlebars compilation comes into action. First, the Handlebars code gets converted into a JavaScript function. Then, the function gets run when required by the Ember runtime to append the proper HTML to the DOM.

]]>https://www.sitepoint.com/improving-ember-js-workflow-using-gulp-js/feed/4Fixture Adapters – Ember.js With No Serverhttps://www.sitepoint.com/fixture-adapters-ember-js-server/
https://www.sitepoint.com/fixture-adapters-ember-js-server/#commentsTue, 13 May 2014 19:00:30 +0000http://www.sitepoint.com/?p=81019JavaScript MVC frameworks have become a popular choice for many frontend web developers today. Most of the time though, you will find that your application needs to communicate with some backend web service. Frequent calls to this service can slow down your development time. This can be frustrating, especially if you rely on a third party service which you have no control over.

To get around this issue Ember.js provides a useful feature called fixture adapters. Fixture adapters allow you to mock any possible calls to a server with locally stored dummy data. Once development is complete, you can swap out the fixtures, enabling your application to make calls to a server for real data. In this tutorial, we will be building a sample blog application that shows off Ember's fixture adapters.

Introduction

Our blog application will have several screens. There will be a home page to list the posts, and another for viewing individual posts. Now that we know what we're building, let's get to it.

The index.html File

Create an index.html file in the root of your application and add the following code. This is a simple skeleton that includes Ember.js and its dependencies, Handlebars and jQuery.

[html]
< !DOCTYPE html>

Developing with Ember.js Using Fixture Adapters

Welcome to our Ember.js blog

[/html]

Bootstrapping the Application

Create a new main.js file and paste the following code into it. This bootstraps a new instance of an Ember.js application and defines two routes for you.

List Articles on the Home Page

Next, we need to list our articles on the home page. To do that, complete the following steps.

Redirect to the Article Listing

To make sure that the articles appear on the home page, paste the following code inside your main.js file. This creates an index route and makes sure that anytime the home page is visited, the user is automatically redirected to the articles page.

Create the Article Listing Route

Next, create the article listing route and provide some data for it. Paste this code inside the main.js file. The interesting part of this route is that we are returning a simple JavaScript array of articles as the model for the route.