emberJS

Diving into the codebase of the Open Event Front-end Project

This post aims to help any new contributor to get acquainted with the code base of the Open Event Front-end project. The open event front-end is primarily the front-end for the Open Event API server. The project provides the functionality of signing up, add, update and view events details and many other functions to the organisers, speakers and attendees of the event which can be concert, conference, summit or a meetup. The open event front-end project is built on a JavaScript web application framework Ember.js. Ember uses a library Ember data for managing the data in the application and for communicating with server API via endpoints. Ember is a battery included framework which means that it creates all the boilerplate code required to set up the project and create a working web application which can be modified according to our needs. The open event front-end is primarily the front-end for the Open Event API server. The project provides the functionality of signing up, add, update and view events details and many other functions to the organisers, speakers and attendees of the event which can be concert, conference, summit or a meetup. The open event front-end project is built on a JavaScript web application framework Ember.js. Ember uses a library Ember data for managing the data in the application and for communicating with server API via endpoints. Ember is a battery included framework which means that it creates all the boilerplate code required to set up the project and create a working web application which can be modified according to our needs. For example: When I created a new project using the command: $ ember new open-event-frontend It created a new project open-event-frontend with all the boilerplate code required to set up the project which can be seen below. create .editorconfig create .ember-cli create .eslintrc.js create .travis.yml create .watchmanconfig create README.md create app/app.js create app/components/.gitkeep Installing app create app/controllers/.gitkeep create app/helpers/.gitkeep create app/index.html create app/models/.gitkeep create app/resolver.js create app/router.js create app/routes/.gitkeep create app/styles/app.css create app/templates/application.hbs create app/templates/components/.gitkeep create config/environment.js create config/targets.js create ember-cli-build.js create .gitignore create package.json create public/crossdomain.xml create public/robots.txt create testem.js create tests/.eslintrc.js create tests/helpers/destroy-app.js create tests/helpers/module-for-acceptance.js create tests/helpers/resolver.js create tests/helpers/start-app.js create tests/index.html create tests/integration/.gitkeep create tests/test-helper.js create tests/unit/.gitkeep create vendor/.gitkeep NPM: Installed dependencies Successfully initialized git. Now if we go inside the project directory we can see the following files and folders have been generated by the Ember-CLI which is nothing but a toolkit to create, develop and build ember application. Ember has a runtime resolver which automatically resolves the code if it’s placed at the conventional location which ember knows. ➜ ~ cd open-event-frontend ➜ open-event-frontend git:(master) ls app config ember-cli-build.js node_modules package.json public README.md testem.js tests vendor What do these files and folders contain and what is their role in reference to the project, “Open event front-end”? Fig 1: Directory structure of the Open Event Front-end project Let's take a look at the folders and files Ember CLI generates. App: This is the heart of the…

Continue ReadingDiving into the codebase of the Open Event Front-end Project
Read more about the article Creating nested routes in Open Event Front-end and Navigating them with Tabs via semantic UI – Ember Integration

Creating nested routes in Open Event Front-end and Navigating them with Tabs via semantic UI – Ember Integration

Semantic UI is a modern development framework which helps build responsive and aesthetically beautiful layouts. While it is a really powerful framework in itself, it additionally offers seamless integrations with some of the other open source frameworks including ember js. Open Event Front-end is a project of FOSSASIA organisation, which was created with the aim of decoupling the front end and the back end for the open event orga server. It is primarily based on ember JS and uses semantic UI for it’s UI. Here we will be making a nested route /events/ with /events/live/, events/draft, events/past , events/import as it’s subroutes. To get started with it, we simply use the ember CLI to generate the routes $ ember generate route events Then we go on to generate the successive sub routes as follows $ ember generate route events/live $ ember generate route events/past $ ember generate route events/draft $ ember generate route events/import The router.js file should be looking like this now. this.route('events', function() { this.route('live'); this.route('draft'); this.route('past'); this.route('import'); }); This means that our routes and sub routes are in place. Since we used the ember CLI to generate these routes, the template files for them would have generated automatically. Now these routes exist and we need to write the data in the templates of these routes which will get displayed to the end user. Since the routes are nested, the content of the parent route can be made available to all the children routes via the outlet in ember js. Next, we go to the template file of events/ route which is at templates/events.hbs And write the following code to create a menu and use ember integration of semantic UI link-to to link the tabs of the menu with the corresponding correct route. It will take care of selecting the appropriate data for the corresponding route and display it in the correct tab via the outlet <.div class="row"> <.div class="sixteen wide column"> <.div class="ui fluid pointing secondary menu"> {{#link-to 'events.live' class='item'}} {{t 'Live'}} {{/link-to}} {{#link-to 'events.draft' class='item'}} {{t 'Draft'}} {{/link-to}} {{#link-to 'events.past' class='item'}} {{t 'Past'}} {{/link-to}} {{#link-to 'events.import' class='item'}} {{t 'Import'}} {{/link-to}} <./div> <./div> <./div> <.div class="ui segment"> {{outlet}} <./div> So finally, we start filling in the data for each of these routes. Let’s fill some dummy data at templates/events/live.hbs <.div class="row"> <.div class="sixteen wide column"> <.table class="ui tablet stackable very basic table"> <.thead> <.tr> <.th>{{t 'Name'}}<./th> <.th>{{t 'Date'}}<./th> <.th>{{t 'Roles'}}<./th> <.th>{{t 'Sessions'}}<./th> <.th>{{t 'Speakers'}}<./th> <.th>{{t 'Tickets'}}<./th> <.th>{{t 'Public URL'}}<./th> <.th><./th> <./tr> <./thead> <.tbody> <.tr> <.td> <.div class="ui header weight-400"> <.img src="https://placehold.it/200x200" alt="Event logo" class="ui image"> Sample Event <./div> <./td> <.td> March 18, 2016 - 09:30 AM <.br>(to)<.br> March 20, 2016 - 05:30 PM <./td> <.td> <.div class="ui ordered list"> <.div class="item">sample@gmail.com ({{t 'Organizer'}})<./div> <.div class="item">sample2@gmail.com ({{t 'Manager'}})<./div> <./div> <./td> <.td> <.div class="ui list"> <.div class="item">{{t 'Drafts'}}: 0<./div> <.div class="item">{{t 'Submitted'}}: 0<./div> <.div class="item">{{t 'Accepted'}}: 0<./div> <.div class="item">{{t 'Confirmed'}}: 0<./div> <.div class="item">{{t 'Pending'}}: 0<./div> <.div class="item">{{t 'Rejected'}}: 0<./div> <./div> <./td> <.td> 2 <./td> <.td> <.div class="ui bulleted list">…

Continue ReadingCreating nested routes in Open Event Front-end and Navigating them with Tabs via semantic UI – Ember Integration
Read more about the article ember.js – the right choice for the Open Event Front-end

ember.js – the right choice for the Open Event Front-end

With the development of the API server for the Open Event project we needed to decide which framework to choose for the new Open Event front-end. With the plethora of javascript frameworks available, it got really difficult to decide, which one is actually the right choice. Every month a new framework arrives, and the existing ones keep actively updating themselves often. We decided to go with Ember.js. This article covers the emberJS framework and highlights its advantages over others and  demonstrates its usefulness. EmberJS is an open-source JavaScript application front end framework for creating web applications, and uses Model-View-Controller (MVC) approach. The framework provides universal data binding. It’s focus lies on scalability. Why is Ember JS great? Convention over configuration - It does all the heavy lifting. Ember JS mandates best practices, enforces naming conventions and generates the boilerplate code for the various components and routes itself. This has advantages other than uniformity. It is easier for other developers to join the project and start working right away, instead of spending hours on existing codebase to understand it, as the core structure of all ember apps is similar. To get an ember app started with the basic route, user doesn’t has to do much, ember does all the heavy lifting. ember new my-app ember server After installing this is all it takes to create your app. Ember CLI Similar to Ruby on Rails, ember has a powerful CLI. It can be used to generate boiler plate codes for components, routes, tests and much more. Testing is possible via the CLI as well. ember generate component my-component ember generate route my-route ember test These are some of the examples which show how easy it is to manage the code via the ember CLI. Tests.Tests.Tests. Ember JS makes it incredibly easy to use test-first approach. Integration tests, acceptance tests, and unit tests are in built into the framework. And can be generated from the CLI itself, the documentation on them is well written and it’s really easy to customise them. ember generate acceptance-test my-test This is all it takes to set up the entire boiler plate for the test, which you can customise Excellent documentation and guides Ember JS has one of the best possible documentations available for a framework. The guides are a breeze to follow. It is highly recommended that, if starting out on ember, make the demo app from the official ember Guides. That should be enough to get familiar with ember. Ember Guides is all you need to get started. Ember Data It sports one of the best implemented API data fetching capabilities. Fetching and using data in your app is a breeze. Ember comes with an inbuilt data management library Ember Data. To generate a data model via ember CLI , all you have to do is ember generate model my-model Where is it being used? Ember has a huge community and is being used all around. This article focuses on it’s salient features via the example of…

Continue Readingember.js – the right choice for the Open Event Front-end