Ember application structure

Check out the new site at https://rkblog.dev.

15 November 2015 Comments

Ember.js applications are divided into multiple files and folders. All of which makes sense when we get to know what is where, so lets take a look on Ember application structure.

ember-cli guide has a deep walk-through on each application element. I'll cover the most important parts:

app/: In this folder we will have all of our application code - templates, routes, components and more. Each element can be generated with ember-cli.
public/: contents of this folder will be put into root path of your application. Here you can put static files like fonts, images and alike.
bower_components/: folder for application dependencies (installed by bower)
bower.json: file that lists all bower dependencies from which all bower_components are installed.
node_modules/: folder for development dependencies installed by npm
package.json: file that lists all npm dependencies
vendor/: other dependencies not covered by npm or bower
ember-cli-build.js: build instructions for Broccoli. Here we register CSS/JS files from bower_components that we want to use.
config/environment.js: application configuration file.

Development server compiles the application on the fly. For production we can build a complete application with:

ember build --environment="production"

This will create a stand-alone production version in dist folder. Ember application assumes that it will be run in default path (root path /). If you want to run your ember application in a subfolder/different path then you have to specify it in the configuration before building (config/environment.js):

  if (environment === 'production') {
    ENV.baseURL = '/some/path/here/';
  }

The Welcome to Ember text is located in app/templates/application.hbs template - a htmlbars template. To create new pages and other elements within ember application we will use ember-cli, but that's in the next tutorial. You can change the text now and check if watchman will reload that page open in the browser.

RkBlog

Django web framework tutorials, 15 November 2015

Check out the new site at https://rkblog.dev.

Comment article

Basics of Ember.js application development

After setting up the base of our ember application we can start doing something more with it. For my tutorials I've picked AdminLTE template to make a admin panel alike application.

› Read more

Setting up ember-cli development environment with ember 2.1

In a series of tutorials starting with this one I'll try to showcase ember.js framework for building fronted web applications. As a backend there will be Django Rest Frameowork and more.

As times change and JavaScript frameworks don't just download to your static folder I'll start with setting up Ember.js development environment with ember-cli.

› Read more

Check out PyCon PL 2015 agenda

The PyCon PL 2015 will be held in Hotel Ossa Congress & Spa located in Ossa on October 15th through October 18th. The conference is held in Poland but consists of two blocks of talks - English and Polish, so non-Polish speaking attendees can benefit from it too.

The agenda and other details can be found on the conference website.

› Read more

Squashing and optimizing migrations in Django

With Django 1.7 we got built in migrations and a management command to squash a set of existing migrations into one optimized migration - for faster test database building and to remove some legacy code/history. Squashing works, but it still has some rough edges and requires some manual work to get the best of a squashed migration. Here are few tips for squashing and optimizing squashed migrations.

› Read more

Simple Django applications for writing Facebook applications and authentication

Creating Facebook applications or integrating websites with Facebook isn't complex or very time consuming. In case of Django there is for example very big django-facebook package that provides a lot of Facebook related features.

Pozytywnie.pl, a company I work with released a set of small applications that were used internally to make Facebook applications as well as Facebook authentication integrations. In this article I'll showcase those applications.

› Read more

Example Ember.js + Django + Django Rest Framework single-page application

Ember.js is one of JavaScript frameworks for creating interactive single page web applications. Pages may change but the browser doesn't reload the page. This framework has some similarities with Django and can be good pick to start with such frontend applications for Django developers with some JavaScript knowledge.

In this article I'll show you an example Django + Django Rest Framework + Ember.js application. Classical posts and categories done in Ember and in Django for comparison.

› Read more