Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T02:25:33Z

Rarora4: /* Known Issues and Proposed Future Work */

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

==Project Requirements ==
===Problem Definition===
Design strategy has been one of the major issue for erratic behavior of Mailer within Expertiza. From past few years the Expertiza has been combined with various enhancements and the code has been changed by different teams, the difference in the implementation practices has introduced major design flaws within some components (including Mailer) of the application. Another major issue is the migration issue from Rails 3 to Rails 4 as a result of which many of the unsupported features for Rails 4 have stopped working.

===Requirements===
The aim of this Mailer project is to bring consistency in the design implementation and restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. High-level requirements are listed below:

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

== Mailer in Expertiza==

===Type of Mailers===
Expertiza has two different Mailer implementations based on type of events: Synchronous events and Asynchronous events. The synchronous events refer to events that should be immediately notified. For example, email should be sent immediately after a review; or after a feedback of the review has been posted; or a user/team is assigned a project, or a social bookmark have been added, etc. Asynchronous Events are a series of timed events which gets triggered at some fixed times, such as weekly quiz reminders, deadline approaching reminders or in fact Sign Up topic availability reminder is a very explanatory example of Asynchronous Events.

Below mentioned are the changes made in each of the Mailer implementation and in related files.

===Synchronous Mailer and Issues===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Mailer and Issues===

The asynchronous mailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

==Other Issues Addressed==
===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models

===Assignment Controller===
Each due date for submission, review, meta review, sign up, and drop topic were missing under the Assignment edit page due to the bugs in its views and partials files. The JavaScript implementation was previously done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

==Testing==
===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation for Reviewers==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known issues and Proposed Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidentally changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

7. Extending Expertiza's scope to include 'Receive' email functionality.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T01:46:35Z

Rarora4: /* Known Issues and Future Work */

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

==Project Requirements ==
===Problem Definition===
Design strategy has been one of the major issue for erratic behavior of Mailer within Expertiza. From past few years the Expertiza has been combined with various enhancements and the code has been changed by different teams, the difference in the implementation practices has introduced major design flaws within some components (including Mailer) of the application. Another major issue is the migration issue from Rails 3 to Rails 4 as a result of which many of the unsupported features for Rails 4 have stopped working.

===Requirements===
The aim of this Mailer project is to bring consistency in the design implementation and restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. High-level requirements are listed below:

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

== Mailer in Expertiza==

===Type of Mailers===
Expertiza has two different Mailer implementations based on type of events: Synchronous events and Asynchronous events. The synchronous events refer to events that should be immediately notified. For example, email should be sent immediately after a review; or after a feedback of the review has been posted; or a user/team is assigned a project, or a social bookmark have been added, etc. Asynchronous Events are a series of timed events which gets triggered at some fixed times, such as weekly quiz reminders, deadline approaching reminders or in fact Sign Up topic availability reminder is a very explanatory example of Asynchronous Events.

Below mentioned are the changes made in each of the Mailer implementation and in related files.

===Synchronous Mailer and Issues===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Mailer and Issues===

The asynchronous mailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

==Other Issues Addressed==
===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models

===Assignment Controller===
Each due date for submission, review, meta review, sign up, and drop topic were missing under the Assignment edit page due to the bugs in its views and partials files. The JavaScript implementation was previously done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

==Testing==
===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation for Reviewers==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Proposed Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidentally changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

7. Extending Expertiza's scope to include 'Receive' email functionality.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T01:44:17Z

Rarora4: /* Installation */

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

==Project Requirements ==
===Problem Definition===
Design strategy has been one of the major issue for erratic behavior of Mailer within Expertiza. From past few years the Expertiza has been combined with various enhancements and the code has been changed by different teams, the difference in the implementation practices has introduced major design flaws within some components (including Mailer) of the application. Another major issue is the migration issue from Rails 3 to Rails 4 as a result of which many of the unsupported features for Rails 4 have stopped working.

===Requirements===
The aim of this Mailer project is to bring consistency in the design implementation and restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. High-level requirements are listed below:

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

== Mailer in Expertiza==

===Type of Mailers===
Expertiza has two different Mailer implementations based on type of events: Synchronous events and Asynchronous events. The synchronous events refer to events that should be immediately notified. For example, email should be sent immediately after a review; or after a feedback of the review has been posted; or a user/team is assigned a project, or a social bookmark have been added, etc. Asynchronous Events are a series of timed events which gets triggered at some fixed times, such as weekly quiz reminders, deadline approaching reminders or in fact Sign Up topic availability reminder is a very explanatory example of Asynchronous Events.

Below mentioned are the changes made in each of the Mailer implementation and in related files.

===Synchronous Mailer and Issues===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Mailer and Issues===

The asynchronous mailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

==Other Issues Addressed==
===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models

===Assignment Controller===
Each due date for submission, review, meta review, sign up, and drop topic were missing under the Assignment edit page due to the bugs in its views and partials files. The JavaScript implementation was previously done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

==Testing==
===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation for Reviewers==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T01:43:36Z

Rarora4: /* Other Issues */

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

==Project Requirements ==
===Problem Definition===
Design strategy has been one of the major issue for erratic behavior of Mailer within Expertiza. From past few years the Expertiza has been combined with various enhancements and the code has been changed by different teams, the difference in the implementation practices has introduced major design flaws within some components (including Mailer) of the application. Another major issue is the migration issue from Rails 3 to Rails 4 as a result of which many of the unsupported features for Rails 4 have stopped working.

===Requirements===
The aim of this Mailer project is to bring consistency in the design implementation and restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. High-level requirements are listed below:

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

== Mailer in Expertiza==

===Type of Mailers===
Expertiza has two different Mailer implementations based on type of events: Synchronous events and Asynchronous events. The synchronous events refer to events that should be immediately notified. For example, email should be sent immediately after a review; or after a feedback of the review has been posted; or a user/team is assigned a project, or a social bookmark have been added, etc. Asynchronous Events are a series of timed events which gets triggered at some fixed times, such as weekly quiz reminders, deadline approaching reminders or in fact Sign Up topic availability reminder is a very explanatory example of Asynchronous Events.

Below mentioned are the changes made in each of the Mailer implementation and in related files.

===Synchronous Mailer and Issues===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Mailer and Issues===

The asynchronous mailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

==Other Issues Addressed==
===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models

===Assignment Controller===
Each due date for submission, review, meta review, sign up, and drop topic were missing under the Assignment edit page due to the bugs in its views and partials files. The JavaScript implementation was previously done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

==Testing==
===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T01:39:49Z

Rarora4: /* Installation Steps to check Mailer */

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

==Project Requirements ==
===Problem Definition===
Design strategy has been one of the major issue for erratic behavior of Mailer within Expertiza. From past few years the Expertiza has been combined with various enhancements and the code has been changed by different teams, the difference in the implementation practices has introduced major design flaws within some components (including Mailer) of the application. Another major issue is the migration issue from Rails 3 to Rails 4 as a result of which many of the unsupported features for Rails 4 have stopped working.

===Requirements===
The aim of this Mailer project is to bring consistency in the design implementation and restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. High-level requirements are listed below:

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

== Mailer in Expertiza==

===Type of Mailers===
Expertiza has two different Mailer implementations based on type of events: Synchronous events and Asynchronous events. The synchronous events refer to events that should be immediately notified. For example, email should be sent immediately after a review; or after a feedback of the review has been posted; or a user/team is assigned a project, or a social bookmark have been added, etc. Asynchronous Events are a series of timed events which gets triggered at some fixed times, such as weekly quiz reminders, deadline approaching reminders or in fact Sign Up topic availability reminder is a very explanatory example of Asynchronous Events.

Below mentioned are the changes made in each of the Mailer implementation and in related files.

===Synchronous Mailer and Issues===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Mailer and Issues===

The asynchronous mailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

==Other Issues==
===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models

===Assignment Controller===
Each due date for submission, review, meta review, sign up, and drop topic were missing under the Assignment edit page due to the bugs in its views and partials files. The JavaScript implementation was previously done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

==Testing==
===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T01:37:23Z

Rarora4: /* Asynchronous and Issues */

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

==Project Requirements ==
===Problem Definition===
Design strategy has been one of the major issue for erratic behavior of Mailer within Expertiza. From past few years the Expertiza has been combined with various enhancements and the code has been changed by different teams, the difference in the implementation practices has introduced major design flaws within some components (including Mailer) of the application. Another major issue is the migration issue from Rails 3 to Rails 4 as a result of which many of the unsupported features for Rails 4 have stopped working.

===Requirements===
The aim of this Mailer project is to bring consistency in the design implementation and restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. High-level requirements are listed below:

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

== Mailer in Expertiza==

===Type of Mailers===
Expertiza has two different Mailer implementations based on type of events: Synchronous events and Asynchronous events. The synchronous events refer to events that should be immediately notified. For example, email should be sent immediately after a review; or after a feedback of the review has been posted; or a user/team is assigned a project, or a social bookmark have been added, etc. Asynchronous Events are a series of timed events which gets triggered at some fixed times, such as weekly quiz reminders, deadline approaching reminders or in fact Sign Up topic availability reminder is a very explanatory example of Asynchronous Events.

Below mentioned are the changes made in each of the Mailer implementation and in related files.

===Synchronous Mailer and Issues===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Mailer and Issues===

The asynchronous mailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

==Other Issues==
===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models

===Assignment Controller===
Each due date for submission, review, meta review, sign up, and drop topic were missing under the Assignment edit page due to the bugs in its views and partials files. The JavaScript implementation was previously done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

==Testing==
===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps to check Mailer==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T01:36:54Z

Rarora4: /* Asynchronous Emailer */

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

==Project Requirements ==
===Problem Definition===
Design strategy has been one of the major issue for erratic behavior of Mailer within Expertiza. From past few years the Expertiza has been combined with various enhancements and the code has been changed by different teams, the difference in the implementation practices has introduced major design flaws within some components (including Mailer) of the application. Another major issue is the migration issue from Rails 3 to Rails 4 as a result of which many of the unsupported features for Rails 4 have stopped working.

===Requirements===
The aim of this Mailer project is to bring consistency in the design implementation and restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. High-level requirements are listed below:

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

== Mailer in Expertiza==

===Type of Mailers===
Expertiza has two different Mailer implementations based on type of events: Synchronous events and Asynchronous events. The synchronous events refer to events that should be immediately notified. For example, email should be sent immediately after a review; or after a feedback of the review has been posted; or a user/team is assigned a project, or a social bookmark have been added, etc. Asynchronous Events are a series of timed events which gets triggered at some fixed times, such as weekly quiz reminders, deadline approaching reminders or in fact Sign Up topic availability reminder is a very explanatory example of Asynchronous Events.

Below mentioned are the changes made in each of the Mailer implementation and in related files.

===Synchronous Mailer and Issues===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous and Issues===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

==Other Issues==
===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models

===Assignment Controller===
Each due date for submission, review, meta review, sign up, and drop topic were missing under the Assignment edit page due to the bugs in its views and partials files. The JavaScript implementation was previously done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

==Testing==
===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps to check Mailer==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T01:36:42Z

Rarora4: /* Synchronous Emailer */

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

==Project Requirements ==
===Problem Definition===
Design strategy has been one of the major issue for erratic behavior of Mailer within Expertiza. From past few years the Expertiza has been combined with various enhancements and the code has been changed by different teams, the difference in the implementation practices has introduced major design flaws within some components (including Mailer) of the application. Another major issue is the migration issue from Rails 3 to Rails 4 as a result of which many of the unsupported features for Rails 4 have stopped working.

===Requirements===
The aim of this Mailer project is to bring consistency in the design implementation and restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. High-level requirements are listed below:

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

== Mailer in Expertiza==

===Type of Mailers===
Expertiza has two different Mailer implementations based on type of events: Synchronous events and Asynchronous events. The synchronous events refer to events that should be immediately notified. For example, email should be sent immediately after a review; or after a feedback of the review has been posted; or a user/team is assigned a project, or a social bookmark have been added, etc. Asynchronous Events are a series of timed events which gets triggered at some fixed times, such as weekly quiz reminders, deadline approaching reminders or in fact Sign Up topic availability reminder is a very explanatory example of Asynchronous Events.

Below mentioned are the changes made in each of the Mailer implementation and in related files.

===Synchronous Mailer and Issues===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Emailer===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

==Other Issues==
===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models

===Assignment Controller===
Each due date for submission, review, meta review, sign up, and drop topic were missing under the Assignment edit page due to the bugs in its views and partials files. The JavaScript implementation was previously done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

==Testing==
===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps to check Mailer==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T01:35:33Z

Rarora4: /* Other Issues */

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

==Project Requirements ==
===Problem Definition===
Design strategy has been one of the major issue for erratic behavior of Mailer within Expertiza. From past few years the Expertiza has been combined with various enhancements and the code has been changed by different teams, the difference in the implementation practices has introduced major design flaws within some components (including Mailer) of the application. Another major issue is the migration issue from Rails 3 to Rails 4 as a result of which many of the unsupported features for Rails 4 have stopped working.

===Requirements===
The aim of this Mailer project is to bring consistency in the design implementation and restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. High-level requirements are listed below:

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

== Mailer in Expertiza==

===Type of Mailers===
Expertiza has two different Mailer implementations based on type of events: Synchronous events and Asynchronous events. The synchronous events refer to events that should be immediately notified. For example, email should be sent immediately after a review; or after a feedback of the review has been posted; or a user/team is assigned a project, or a social bookmark have been added, etc. Asynchronous Events are a series of timed events which gets triggered at some fixed times, such as weekly quiz reminders, deadline approaching reminders or in fact Sign Up topic availability reminder is a very explanatory example of Asynchronous Events.

Below mentioned are the changes made in each of the Mailer implementation and in related files.

===Synchronous Emailer===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Emailer===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

==Other Issues==
===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models

===Assignment Controller===
Each due date for submission, review, meta review, sign up, and drop topic were missing under the Assignment edit page due to the bugs in its views and partials files. The JavaScript implementation was previously done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

==Testing==
===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps to check Mailer==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T01:35:19Z

Rarora4: /* Mailer in Expertiza */

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

==Project Requirements ==
===Problem Definition===
Design strategy has been one of the major issue for erratic behavior of Mailer within Expertiza. From past few years the Expertiza has been combined with various enhancements and the code has been changed by different teams, the difference in the implementation practices has introduced major design flaws within some components (including Mailer) of the application. Another major issue is the migration issue from Rails 3 to Rails 4 as a result of which many of the unsupported features for Rails 4 have stopped working.

===Requirements===
The aim of this Mailer project is to bring consistency in the design implementation and restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. High-level requirements are listed below:

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

== Mailer in Expertiza==

===Type of Mailers===
Expertiza has two different Mailer implementations based on type of events: Synchronous events and Asynchronous events. The synchronous events refer to events that should be immediately notified. For example, email should be sent immediately after a review; or after a feedback of the review has been posted; or a user/team is assigned a project, or a social bookmark have been added, etc. Asynchronous Events are a series of timed events which gets triggered at some fixed times, such as weekly quiz reminders, deadline approaching reminders or in fact Sign Up topic availability reminder is a very explanatory example of Asynchronous Events.

Below mentioned are the changes made in each of the Mailer implementation and in related files.

===Synchronous Emailer===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Emailer===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

==Other Issues==
===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models

==Testing==
===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps to check Mailer==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T01:34:43Z

Rarora4: /* Assignment Controller */

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

==Project Requirements ==
===Problem Definition===
Design strategy has been one of the major issue for erratic behavior of Mailer within Expertiza. From past few years the Expertiza has been combined with various enhancements and the code has been changed by different teams, the difference in the implementation practices has introduced major design flaws within some components (including Mailer) of the application. Another major issue is the migration issue from Rails 3 to Rails 4 as a result of which many of the unsupported features for Rails 4 have stopped working.

===Requirements===
The aim of this Mailer project is to bring consistency in the design implementation and restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. High-level requirements are listed below:

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

== Mailer in Expertiza==

===Type of Mailers===
Expertiza has two different Mailer implementations based on type of events: Synchronous events and Asynchronous events. The synchronous events refer to events that should be immediately notified. For example, email should be sent immediately after a review; or after a feedback of the review has been posted; or a user/team is assigned a project, or a social bookmark have been added, etc. Asynchronous Events are a series of timed events which gets triggered at some fixed times, such as weekly quiz reminders, deadline approaching reminders or in fact Sign Up topic availability reminder is a very explanatory example of Asynchronous Events.

Below mentioned are the changes made in each of the Mailer implementation and in related files.

===Synchronous Emailer===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Emailer===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

===Assignment Controller===
Each due date for submission, review, meta review, sign up, and drop topic were missing under the Assignment edit page due to the bugs in its views and partials files. The JavaScript implementation was previously done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

==Other Issues==
===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models

==Testing==
===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps to check Mailer==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T01:31:29Z

Rarora4: /* Mailer in Expertiza */

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

==Project Requirements ==
===Problem Definition===
Design strategy has been one of the major issue for erratic behavior of Mailer within Expertiza. From past few years the Expertiza has been combined with various enhancements and the code has been changed by different teams, the difference in the implementation practices has introduced major design flaws within some components (including Mailer) of the application. Another major issue is the migration issue from Rails 3 to Rails 4 as a result of which many of the unsupported features for Rails 4 have stopped working.

===Requirements===
The aim of this Mailer project is to bring consistency in the design implementation and restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. High-level requirements are listed below:

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

== Mailer in Expertiza==

===Type of Mailers===
Expertiza has two different Mailer implementations based on type of events: Synchronous events and Asynchronous events. The synchronous events refer to events that should be immediately notified. For example, email should be sent immediately after a review; or after a feedback of the review has been posted; or a user/team is assigned a project, or a social bookmark have been added, etc. Asynchronous Events are a series of timed events which gets triggered at some fixed times, such as weekly quiz reminders, deadline approaching reminders or in fact Sign Up topic availability reminder is a very explanatory example of Asynchronous Events.

Below mentioned are the changes made in each of the Mailer implementation and in related files.

===Synchronous Emailer===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Emailer===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

===Assignment Controller===

Two types of events will trigger email messages. One is synchronous event; the other is asynchronous event. The synchronous events refer to activities of reviewers and authors. For example, each email should be sent when work has been reviewed; a feedback to the review has been posted; meta review comments, and social bookmark have been added. In addition, when a user is cleared from the waiting list the party should be notified. Our next task is to restore the assignment features in order to examine the asynchronous events. Asynchronous events are a serious of time events. Due to the bugs in views and partials files under the assignment edit page, each due date for submission, review, meta review, sign up, and drop topic is missing. The JavaScript implementation is done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

==Other Issues==
===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models

==Testing==
===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps to check Mailer==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T01:30:42Z

Rarora4:

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

==Project Requirements ==
===Problem Definition===
Design strategy has been one of the major issue for erratic behavior of Mailer within Expertiza. From past few years the Expertiza has been combined with various enhancements and the code has been changed by different teams, the difference in the implementation practices has introduced major design flaws within some components (including Mailer) of the application. Another major issue is the migration issue from Rails 3 to Rails 4 as a result of which many of the unsupported features for Rails 4 have stopped working.

===Requirements===
The aim of this Mailer project is to bring consistency in the design implementation and restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. High-level requirements are listed below:

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

== Mailer in Expertiza==

===Type of Mailers===
Expertiza has two different Mailer implementations based on type of events: Synchronous events and Asynchronous events. The synchronous events refer to events that should be immediately notified. For example, email should be sent immediately after a review; or after a feedback of the review has been posted; or a user/team is assigned a project, or a social bookmark have been added, etc. Asynchronous Events are a series of timed events which gets triggered at some fixed times, such as weekly quiz reminders, deadline approaching reminders or in fact Sign Up topic availability reminder is a very explanatory example of Asynchronous Events.

Below mentioned are the changes made in each of the Mailer implementation and in related files.

===Synchronous Emailer===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Emailer===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

===Assignment Controller===

Two types of events will trigger email messages. One is synchronous event; the other is asynchronous event. The synchronous events refer to activities of reviewers and authors. For example, each email should be sent when work has been reviewed; a feedback to the review has been posted; meta review comments, and social bookmark have been added. In addition, when a user is cleared from the waiting list the party should be notified. Our next task is to restore the assignment features in order to examine the asynchronous events. Asynchronous events are a serious of time events. Due to the bugs in views and partials files under the assignment edit page, each due date for submission, review, meta review, sign up, and drop topic is missing. The JavaScript implementation is done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

==Other Issues==
===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models

==Testing==
===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps to check Mailer==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T01:06:00Z

Rarora4: /* Project Requirements */

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

==Project Requirements ==
===Problem Definition===
Design strategy has been one of the major issue for erratic behavior of Mailer within Expertiza. From past few years the Expertiza has been combined with various enhancements and the code has been changed by different teams, the difference in the implementation practices has introduced major design flaws within some components (including Mailer) of the application. Another major issue is the migration issue from Rails 3 to Rails 4 as a result of which many of the unsupported features for Rails 4 have stopped working.

===Requirements===
The aim of this Mailer project is to bring consistency in the design implementation and restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. High-level requirements are listed below:

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

== Modification to Existing Code==

===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models.

===Assignment Controller===

Two types of events will trigger email messages. One is synchronous event; the other is asynchronous event. The synchronous events refer to activities of reviewers and authors. For example, each email should be sent when work has been reviewed; a feedback to the review has been posted; meta review comments, and social bookmark have been added. In addition, when a user is cleared from the waiting list the party should be notified. Our next task is to restore the assignment features in order to examine the asynchronous events. Asynchronous events are a serious of time events. Due to the bugs in views and partials files under the assignment edit page, each due date for submission, review, meta review, sign up, and drop topic is missing. The JavaScript implementation is done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

===Synchronous Emailer===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Emailer===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T01:03:37Z

Rarora4:

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

==Project Requirements ==
===Problem with existing Mailer===
Design strategy has been one of the major issue for erratic behavior of Mailer within Expertiza. From past few years the Expertiza has been combined with various enhancements and the code has been changed by different teams, the difference in the implementation practices has introduced major design flaws within some components (including Mailer) of the application.

===Requirements===
The aim of this Mailer project is to bring consistency in the design implementation and restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. High-level requirements are listed below:

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

== Modification to Existing Code==

===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models.

===Assignment Controller===

Two types of events will trigger email messages. One is synchronous event; the other is asynchronous event. The synchronous events refer to activities of reviewers and authors. For example, each email should be sent when work has been reviewed; a feedback to the review has been posted; meta review comments, and social bookmark have been added. In addition, when a user is cleared from the waiting list the party should be notified. Our next task is to restore the assignment features in order to examine the asynchronous events. Asynchronous events are a serious of time events. Due to the bugs in views and partials files under the assignment edit page, each due date for submission, review, meta review, sign up, and drop topic is missing. The JavaScript implementation is done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

===Synchronous Emailer===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Emailer===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T00:31:45Z

Rarora4:

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

[http://guides.rubyonrails.org/action_mailer_basics.html Action Mailer] supports email functionality within a Rails application, which involves sending and receiving emails from and to an application. The scope of the Action Mailer within Expertiza is limited to sending emails only which we have proposed to extend to 'Receiving' under the heading ‘Future Work’.

__TOC__

Although combined with various enhancements from the past two years, is seriously broken, from data migration to key feature implementation. Part of the reason has been the design strategy and code changes by various teams. The Expertiza Emailer team, consisting of three students, aims to restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

==Project Requirements ==

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

== Modification to Existing Code==

===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models.

===Assignment Controller===

Two types of events will trigger email messages. One is synchronous event; the other is asynchronous event. The synchronous events refer to activities of reviewers and authors. For example, each email should be sent when work has been reviewed; a feedback to the review has been posted; meta review comments, and social bookmark have been added. In addition, when a user is cleared from the waiting list the party should be notified. Our next task is to restore the assignment features in order to examine the asynchronous events. Asynchronous events are a serious of time events. Due to the bugs in views and partials files under the assignment edit page, each due date for submission, review, meta review, sign up, and drop topic is missing. The JavaScript implementation is done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

===Synchronous Emailer===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Emailer===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T00:25:07Z

Rarora4:

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and educational purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

__TOC__

Although combined with various enhancements from the past two years, is seriously broken, from data migration to key feature implementation. Part of the reason has been the design strategy and code changes by various teams. The Expertiza Emailer team, consisting of three students, aims to restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

==Project Requirements ==

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

== Modification to Existing Code==

===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models.

===Assignment Controller===

Two types of events will trigger email messages. One is synchronous event; the other is asynchronous event. The synchronous events refer to activities of reviewers and authors. For example, each email should be sent when work has been reviewed; a feedback to the review has been posted; meta review comments, and social bookmark have been added. In addition, when a user is cleared from the waiting list the party should be notified. Our next task is to restore the assignment features in order to examine the asynchronous events. Asynchronous events are a serious of time events. Due to the bugs in views and partials files under the assignment edit page, each due date for submission, review, meta review, sign up, and drop topic is missing. The JavaScript implementation is done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

===Synchronous Emailer===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Emailer===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T00:23:20Z

Rarora4:

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==
[http://http://expertiza.ncsu.edu/ Expertiza] is an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and education purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

__TOC__

Although combined with various enhancements from the past two years, is seriously broken, from data migration to key feature implementation. Part of the reason has been the design strategy and code changes by various teams. The Expertiza Emailer team, consisting of three students, aims to restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

==Project Requirements ==

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

== Modification to Existing Code==

===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models.

===Assignment Controller===

Two types of events will trigger email messages. One is synchronous event; the other is asynchronous event. The synchronous events refer to activities of reviewers and authors. For example, each email should be sent when work has been reviewed; a feedback to the review has been posted; meta review comments, and social bookmark have been added. In addition, when a user is cleared from the waiting list the party should be notified. Our next task is to restore the assignment features in order to examine the asynchronous events. Asynchronous events are a serious of time events. Due to the bugs in views and partials files under the assignment edit page, each due date for submission, review, meta review, sign up, and drop topic is missing. The JavaScript implementation is done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

===Synchronous Emailer===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Emailer===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T00:22:00Z

Rarora4:

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==

Expertiza<ref name="expertiza>''Expertiza'' http://wikis.lib.ncsu.edu/index.php/Expertiza</ref>, an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual student projects which involves team creation, project sign up, project submissions, document upload (almost any format), and carry out multiple peer review processes for learning and education purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed and consumed by students of class CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

__TOC__

Although combined with various enhancements from the past two years, is seriously broken, from data migration to key feature implementation. Part of the reason has been the design strategy and code changes by various teams. The Expertiza Emailer team, consisting of three students, aims to restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

==Project Requirements ==

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

== Modification to Existing Code==

===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models.

===Assignment Controller===

Two types of events will trigger email messages. One is synchronous event; the other is asynchronous event. The synchronous events refer to activities of reviewers and authors. For example, each email should be sent when work has been reviewed; a feedback to the review has been posted; meta review comments, and social bookmark have been added. In addition, when a user is cleared from the waiting list the party should be notified. Our next task is to restore the assignment features in order to examine the asynchronous events. Asynchronous events are a serious of time events. Due to the bugs in views and partials files under the assignment edit page, each due date for submission, review, meta review, sign up, and drop topic is missing. The JavaScript implementation is done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

===Synchronous Emailer===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Emailer===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-30T00:16:48Z

Rarora4:

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

==Overview==

Expertiza<ref name="expertiza>''Expertiza'' http://wikis.lib.ncsu.edu/index.php/Expertiza</ref>, an [http://en.wikipedia.org/wiki/Open-source_software Open Source] [http://rubyonrails.org/ Rails] application designed to support team/individual projects, submissions of almost any document type, and carry out multiple peer review processes for learning and education purpose. The rationale behind Expertiza is that the students should not only be consumers but also creator of educational resources. Based on this philosophy, the tool is extensively managed, and consumed by students of CSC517 Object Oriented Programming Languages and Systems course at NC State University as their main project management tool. This Open Source application can be cloned from [https://github.com/expertiza/expertiza/ Github], the latest active branch is "Rails 4".

__TOC__

Although combined with various enhancements from the past two years, is seriously broken, from data migration to key feature implementation. Part of the reason has been the design strategy and code changes by various teams. The Expertiza Emailer team, consisting of three students, aims to restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

==Project Requirements ==

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

== Modification to Existing Code==

===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models.

===Assignment Controller===

Two types of events will trigger email messages. One is synchronous event; the other is asynchronous event. The synchronous events refer to activities of reviewers and authors. For example, each email should be sent when work has been reviewed; a feedback to the review has been posted; meta review comments, and social bookmark have been added. In addition, when a user is cleared from the waiting list the party should be notified. Our next task is to restore the assignment features in order to examine the asynchronous events. Asynchronous events are a serious of time events. Due to the bugs in views and partials files under the assignment edit page, each due date for submission, review, meta review, sign up, and drop topic is missing. The JavaScript implementation is done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

===Synchronous Emailer===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Emailer===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-29T23:48:52Z

Rarora4:

= '''E1451 - Create Mailers for All Email Messages''' =

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

__TOC__

==Introduction==

Expertiza<ref name="expertiza>''Expertiza'' http://wikis.lib.ncsu.edu/index.php/Expertiza</ref>, an open source web application designed to carry out multiple peer review processes for learning and education purpose, has been used by CSC517 Object Oriented Programming Languages and Systems course at NC State University as the main project management tool. The latest "Rails 4" branch of Expertiza, although combined with various enhancements from the past two years, is seriously broken, from data migration to key feature implementation. Part of the reason has been the design strategy and code changes by various teams. The Expertiza Emailer team, consisting of three students, aims to restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

==Project Requirements ==

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

== Modification to Existing Code==

===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models.

===Assignment Controller===

Two types of events will trigger email messages. One is synchronous event; the other is asynchronous event. The synchronous events refer to activities of reviewers and authors. For example, each email should be sent when work has been reviewed; a feedback to the review has been posted; meta review comments, and social bookmark have been added. In addition, when a user is cleared from the waiting list the party should be notified. Our next task is to restore the assignment features in order to examine the asynchronous events. Asynchronous events are a serious of time events. Due to the bugs in views and partials files under the assignment edit page, each due date for submission, review, meta review, sign up, and drop topic is missing. The JavaScript implementation is done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

===Synchronous Emailer===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Emailer===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

CSC/ECE 517 Fall 2014/OSS E1451 las

2014-10-29T23:47:29Z

Rarora4:

=E1451 - Create Mailers for All Email Messages=

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:Logo.jpg|center|Expertiza + ActionMailer<ref>http://wiki.expertiza.ncsu.edu/images/d/d4/Logo.jpg</ref>]]
|-
|'''Name'''||[http://guides.rubyonrails.org/action_mailer_basics.html ActionMailer] + [http://http://expertiza.ncsu.edu/ Expertiza]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-

__TOC__

==Introduction==

Expertiza<ref name="expertiza>''Expertiza'' http://wikis.lib.ncsu.edu/index.php/Expertiza</ref>, an open source web application designed to carry out multiple peer review processes for learning and education purpose, has been used by CSC517 Object Oriented Programming Languages and Systems course at NC State University as the main project management tool. The latest "Rails 4" branch of Expertiza, although combined with various enhancements from the past two years, is seriously broken, from data migration to key feature implementation. Part of the reason has been the design strategy and code changes by various teams. The Expertiza Emailer team, consisting of three students, aims to restore the e-mailer and e-mail messages capability from Projects E701 and E729, and bring back the new features created by Project E916. Significant amount of time has been spent on correcting bugs and errors in the program before the email features can be restored, and therefore this wiki also documents the changes our team has made and provides a guideline for future development and enhancement.

==Project Requirements ==

1. Restore features and functions in Expertiza that trigger email messages

2. Create mailers for all email messages for both asynchronous events and synchronous events

3. All emails should be sent via ActionMailer

4. Emails should have different class

== Modification to Existing Code==

===Data migration issue===

The database migration issue occurs when carrying out "rake db:migrate" command. We found the mirrored image from the existing database still has incorrect table fields. The problem may not appear until later during feature testing. Therefore, our team decided to fix the data migration issues from ground up. In total, more than 36 files have been fixed. Most of them are database migration files. To eliminate future table creation issues with mysql2 gem, we have also changed the integer byte length of MySQL tables from 10 to 8 and have revised the SQL query methods inside the migration files to improve efficiency. The methods missing from the models directory related to site_controller have been restored for controller_action, menu_item, permission, role, and site_controller models.

===Assignment Controller===

Two types of events will trigger email messages. One is synchronous event; the other is asynchronous event. The synchronous events refer to activities of reviewers and authors. For example, each email should be sent when work has been reviewed; a feedback to the review has been posted; meta review comments, and social bookmark have been added. In addition, when a user is cleared from the waiting list the party should be notified. Our next task is to restore the assignment features in order to examine the asynchronous events. Asynchronous events are a serious of time events. Due to the bugs in views and partials files under the assignment edit page, each due date for submission, review, meta review, sign up, and drop topic is missing. The JavaScript implementation is done via JQuery gem. After the JavaScript has been fixed, now the correct due dates are displayed correctly.

The following changes have been made:

1. All *.rhtml files in app/views/bookmarks have been renamed to *.html.erb for compatibly reason.

2. The following lines have been added to Gemfile

gem 'jquery-datetimepicker-rails'
gem 'graphr'
gem 'daemons'

3. The following parsing errors in app/controllers/assignment_controller.rb have been corrected.

Original:

duatedates[i].due_date(:db).to_s

Changed:

duatedates[i].due_date.to_s(:db)

4. The following code in ap/views/assignments/edit/_rubrics.html.erb has been changed.

Original:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.review_questionnaire
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>.assignment_questionnaire

Changed:

<%= questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>
<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire').to_json.html_safe %>

===Synchronous Emailer===

All of synchronous events are triggered by controllers and the call is made to app/mailers/mailer.rb (formally as model in /app/models/) via the sync_message() method call. Here mailer.rb extends ActionMailer class. Because part of the email implementation was done on Rails 3 platform, to make it compatible for Rails 4, revision has been made. The required email template has been added for both generic_message and sync_message method calls. Here is an example of synchronous event email that simulates an event when the work you reviewed before has been revised.

1. app/models/mailer.rb has been moved to app/mailers/mailer.rb

2. Two view templates have been added to app/views/mailer directory. They are sync_message.html.erb and sync_message.text.erb

<pre>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<%= render :partial => 'mailer/partials/'+@partial_name+'_html' %>

<hr>

This message has been generated by <A HREF="http://expertiza.ncsu.edu">Expertiza</A><BR/>
http://expertiza.ncsu.edu

</body>
</html>
</pre>

3. Correct DOCTYPE and html codes have been added to app/views/mailer/generic_message.html.erb

4. The following line in the sync_message(defn) method has been comment out from app/mailers/mailer.rb in order to encode email correctly.

content_type: "text/html"

5. The following method calls in the following files have been changed.

a) app/controllers/grades_controller.rb<br>
b) app/models/courses_users.rb<br>
c) app/models/participant.rb<br>

Original:

Mailer.deliver_message(

Changed:

Mailer.sync_message(

===Asynchronous Emailer===

The asynchronous emailer is controlled by Delayed::Job class and a daemon gem must be activated to carry out the task. All events are called to /app/emailers/delayed_mailer.rb via one of the following methods: email_reminder(), mail_assignment_participants(), mail_reviewers(), mail_metareivewers(), getTeamMembersMail(), and mail_signed_up_users(). The DelayedMailer class acts as a wrapper class to the Mailer class in the /app/mailers/mailer.rb via the delayed_message() method call. These events are added to the queue by Delayed::Job.enqueue() command. Each event as record is stored in the delayed_job table, which can be browsed on RubyMine. Because all of the asynchronous events are controlled by the assignment controller, events are triggered by the add_to_delayed_queue() method. Each time when an assignment is updated or saved, event queues are refreshed. We found this is not very efficient but it has worked as expected.

===RSpec test cases===

To test the emailer features, we have restored RSpec test cases for both delayed_mailer.rb (asynchronous maier) and mailer.rb (synchronous mailer). Because the existing RSpec files were developed in RSpec 2.x, upgrade is required. Ideally, the files in /test/fixtures should be used to populate the test data for RSpec, and therefore we did not restore all the files in /spec/fixtures/ directory. Currently, the fixture files are not completed and loading them into the test database may cause failure for the test, so we recommend to comment out the following line in the /spec/rails_helper.rb

#config.global_fixtures = :all

Future developers must take extreme care to make sure all fixture files work before enable this option.

1. Two files have been added spec/ directory:

a) spec/integration/delayed_mailer_spec.rb<br>
b) spec/models/mailer_spec.rb

The following code has been added to each test case:

Delayed::Job.delete_all

2. The following code has been added to spec/rails_helper.rb in order for the RSpec to pass the test.

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
require 'capybara/rails'

==Installation Steps==

Because asynchronous events require a daemon running in the background and the new Delayed Job for Rails 4 has additional fields, the following steps are recommended.
<br>

1. Install Expertiza and execute 'bundle install'

2. Create database and perform data migration using 'rake db:migrate'<br>

3. Execute 'rails generate delayed_job:active_record' at the prompt. This will create a delalyed_job file in /bin directory.

4. Execute 'rails generate delayed:upgrade' if delayed_job has been created before.<br>

5. Start the delayed_job server by executing<br><br>

RAILS_ENV=production bin/delayed_job start<br>

==Known Issues and Future Work==

1. The due date for signup activity may not display correctly. To refresh, users must click the "review round" button or the "save" button again.

2. Each time when an assignment is saved all delayed_job tasks will be deleted and refreshed even if the dates have not been changed. This may not be very efficiency and may cause problems in the future. Checking mechanism should be built in to verify if any date has been changed.

3. DateTimePicker field could be accidently changed by mouse click.

4. Prioritization in the Delayed Job function in case of multiple email load

5. Extending functionality to include Weekly/Monthly digest that can consist of users WebAssign summary.

6. In-built messaging (Inbox, Sent, Draft etc.) functionality in addition to email for easy tracking of outgoing and incoming messages.

==References==

<references/>

File:Logo.jpg

2014-10-29T23:42:37Z

Rarora4: Expertiza + ActionMailer logo http://expertiza.ncsu.edu/

Expertiza + ActionMailer logo
http://expertiza.ncsu.edu/

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-15T04:37:49Z

Rarora4: /* Prerequisiteshttp://angular-rails.com/ */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.<ref>http://code.tutsplus.com/tutorials/5-awesome-angularjs-features--net-25651</ref>

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.<ref>https://www.codeschool.com/courses/shaping-up-with-angular-js</ref>

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.<ref>http://joelhooks.com/blog/2013/09/15/why-i-built-an-angularjs-training-site-on-rails</ref>

==Getting Started<ref>http://sebastien.saunier.me/blog/2014/02/04/angular--rails-with-no-fuss.html</ref>==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:<ref>http://angular-rails.com/</ref>
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: Restauranteur <ref>http://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails</ref>

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

then run Migration
<pre>
$ rake db:migrate
</pre>

and finally Seed the database:
<pre>
# db/seeds.rb

Restaurant.create([
{ name: "The French Laundry" },
{ name: "Chez Panisse" },
{ name: "Bouchon" },
{ name: "Noma" },
{ name: "Taco Bell" },
])
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own '''Controller'''. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller '''HomeCtrl'''

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

===Step 4: Create Templates and Modify Controller ===

Make changes in the layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

Make template for restaurants (this can be created anywhere), we are making it under public directory and create and index page:

<pre>


<a href="/#">index</a>
<ul ng-repeat="restaurant in restaurants">
<li><a ng-click="viewRestaurant(restaurant.id)">{{ restaurant.name }}</a></li>
</ul>
</pre>

create Restaurant Index Controller
<pre>
# app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.restaurants = []
$http.get('./restaurants.json').success((data) ->
$scope.restaurants = data
)
]
</pre>

===Step 5: Adjust Routing in main.js===

Now modify routing so that new Restaurant Index page is called.

<pre>
# app/assets/javascripts/main.js.coffee

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
$routeProvider.
when('/restaurants', {
templateUrl: '../templates/restaurants/index.html',
controller: 'RestaurantIndexCtrl'
})
])
</pre>

It's done! Now go to URI /#/restaurants to see list of Restaurants we added.

==Testing==
For testing we are going to use Rspec, Karma, and Jasmine framework. We start by first installing Karma server:

====For Ubuntu====
<pre>
sudo npm install -g karma
sudo npm install -g karma-ng-scenario
</pre>

====For Windows====
Install via Git bash
<pre>
npm install -g karma
</pre>

===Step by step Testing Procedure===
Create Test Folder
<pre>
mkdir spec/javascripts
</pre>

Write Tests
<pre>
# spec/javascripts/controllers_spec.js.coffee

describe "Restauranteur controllers", ->
beforeEach module("restauranteur")

describe "RestaurantIndexCtrl", ->
it "should set restaurants to an empty array", inject(($controller) ->
scope = {}
ctrl = $controller("RestaurantIndexCtrl",
$scope: scope
)
expect(scope.restaurants.length).toBe 0
)
</pre>

Add Configurations
<pre>
// spec/javascripts/restauranteur.conf.js

module.exports = function(config) {
config.set({
basePath: '../..',

frameworks: ['jasmine'],

autoWatch: true,

preprocessors: {
'**/*.coffee': 'coffee'
},

files: [
'app/assets/javascripts/angular.js',
'app/assets/javascripts/angular-mocks.js',
'app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee',
'app/assets/javascripts/angular/*',
'spec/javascripts/*_spec.js.coffee'
]
});
};
</pre>

Start Karma Server
<pre>
karma start spec/javascripts/restauranteur.conf.js
</pre>

Go to go to http://localhost:9876/ and test will run and be successful.

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-15T04:37:12Z

Rarora4: /* Getting Startedhttp://sebastien.saunier.me/blog/2014/02/04/angular--rails-with-no-fuss.html */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.<ref>http://code.tutsplus.com/tutorials/5-awesome-angularjs-features--net-25651</ref>

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.<ref>https://www.codeschool.com/courses/shaping-up-with-angular-js</ref>

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.<ref>http://joelhooks.com/blog/2013/09/15/why-i-built-an-angularjs-training-site-on-rails</ref>

==Getting Started<ref>http://sebastien.saunier.me/blog/2014/02/04/angular--rails-with-no-fuss.html</ref>==
===Prerequisites<ref>http://angular-rails.com/</ref>===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: Restauranteur <ref>http://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails</ref>

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

then run Migration
<pre>
$ rake db:migrate
</pre>

and finally Seed the database:
<pre>
# db/seeds.rb

Restaurant.create([
{ name: "The French Laundry" },
{ name: "Chez Panisse" },
{ name: "Bouchon" },
{ name: "Noma" },
{ name: "Taco Bell" },
])
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own '''Controller'''. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller '''HomeCtrl'''

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

===Step 4: Create Templates and Modify Controller ===

Make changes in the layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

Make template for restaurants (this can be created anywhere), we are making it under public directory and create and index page:

<pre>


<a href="/#">index</a>
<ul ng-repeat="restaurant in restaurants">
<li><a ng-click="viewRestaurant(restaurant.id)">{{ restaurant.name }}</a></li>
</ul>
</pre>

create Restaurant Index Controller
<pre>
# app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.restaurants = []
$http.get('./restaurants.json').success((data) ->
$scope.restaurants = data
)
]
</pre>

===Step 5: Adjust Routing in main.js===

Now modify routing so that new Restaurant Index page is called.

<pre>
# app/assets/javascripts/main.js.coffee

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
$routeProvider.
when('/restaurants', {
templateUrl: '../templates/restaurants/index.html',
controller: 'RestaurantIndexCtrl'
})
])
</pre>

It's done! Now go to URI /#/restaurants to see list of Restaurants we added.

==Testing==
For testing we are going to use Rspec, Karma, and Jasmine framework. We start by first installing Karma server:

====For Ubuntu====
<pre>
sudo npm install -g karma
sudo npm install -g karma-ng-scenario
</pre>

====For Windows====
Install via Git bash
<pre>
npm install -g karma
</pre>

===Step by step Testing Procedure===
Create Test Folder
<pre>
mkdir spec/javascripts
</pre>

Write Tests
<pre>
# spec/javascripts/controllers_spec.js.coffee

describe "Restauranteur controllers", ->
beforeEach module("restauranteur")

describe "RestaurantIndexCtrl", ->
it "should set restaurants to an empty array", inject(($controller) ->
scope = {}
ctrl = $controller("RestaurantIndexCtrl",
$scope: scope
)
expect(scope.restaurants.length).toBe 0
)
</pre>

Add Configurations
<pre>
// spec/javascripts/restauranteur.conf.js

module.exports = function(config) {
config.set({
basePath: '../..',

frameworks: ['jasmine'],

autoWatch: true,

preprocessors: {
'**/*.coffee': 'coffee'
},

files: [
'app/assets/javascripts/angular.js',
'app/assets/javascripts/angular-mocks.js',
'app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee',
'app/assets/javascripts/angular/*',
'spec/javascripts/*_spec.js.coffee'
]
});
};
</pre>

Start Karma Server
<pre>
karma start spec/javascripts/restauranteur.conf.js
</pre>

Go to go to http://localhost:9876/ and test will run and be successful.

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-15T04:35:20Z

Rarora4: /* Getting Startedhttp://sebastien.saunier.me/blog/2014/02/04/angular--rails-with-no-fuss.html */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.<ref>http://code.tutsplus.com/tutorials/5-awesome-angularjs-features--net-25651</ref>

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.<ref>https://www.codeschool.com/courses/shaping-up-with-angular-js</ref>

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.<ref>http://joelhooks.com/blog/2013/09/15/why-i-built-an-angularjs-training-site-on-rails</ref>

==Getting Started<ref>http://sebastien.saunier.me/blog/2014/02/04/angular--rails-with-no-fuss.html</ref>==
===Prerequisites===<ref>http://angular-rails.com/</ref>

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: Restauranteur <ref>http://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails</ref>

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

then run Migration
<pre>
$ rake db:migrate
</pre>

and finally Seed the database:
<pre>
# db/seeds.rb

Restaurant.create([
{ name: "The French Laundry" },
{ name: "Chez Panisse" },
{ name: "Bouchon" },
{ name: "Noma" },
{ name: "Taco Bell" },
])
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own '''Controller'''. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller '''HomeCtrl'''

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

===Step 4: Create Templates and Modify Controller ===

Make changes in the layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

Make template for restaurants (this can be created anywhere), we are making it under public directory and create and index page:

<pre>


<a href="/#">index</a>
<ul ng-repeat="restaurant in restaurants">
<li><a ng-click="viewRestaurant(restaurant.id)">{{ restaurant.name }}</a></li>
</ul>
</pre>

create Restaurant Index Controller
<pre>
# app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.restaurants = []
$http.get('./restaurants.json').success((data) ->
$scope.restaurants = data
)
]
</pre>

===Step 5: Adjust Routing in main.js===

Now modify routing so that new Restaurant Index page is called.

<pre>
# app/assets/javascripts/main.js.coffee

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
$routeProvider.
when('/restaurants', {
templateUrl: '../templates/restaurants/index.html',
controller: 'RestaurantIndexCtrl'
})
])
</pre>

It's done! Now go to URI /#/restaurants to see list of Restaurants we added.

==Testing==
For testing we are going to use Rspec, Karma, and Jasmine framework. We start by first installing Karma server:

====For Ubuntu====
<pre>
sudo npm install -g karma
sudo npm install -g karma-ng-scenario
</pre>

====For Windows====
Install via Git bash
<pre>
npm install -g karma
</pre>

===Step by step Testing Procedure===
Create Test Folder
<pre>
mkdir spec/javascripts
</pre>

Write Tests
<pre>
# spec/javascripts/controllers_spec.js.coffee

describe "Restauranteur controllers", ->
beforeEach module("restauranteur")

describe "RestaurantIndexCtrl", ->
it "should set restaurants to an empty array", inject(($controller) ->
scope = {}
ctrl = $controller("RestaurantIndexCtrl",
$scope: scope
)
expect(scope.restaurants.length).toBe 0
)
</pre>

Add Configurations
<pre>
// spec/javascripts/restauranteur.conf.js

module.exports = function(config) {
config.set({
basePath: '../..',

frameworks: ['jasmine'],

autoWatch: true,

preprocessors: {
'**/*.coffee': 'coffee'
},

files: [
'app/assets/javascripts/angular.js',
'app/assets/javascripts/angular-mocks.js',
'app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee',
'app/assets/javascripts/angular/*',
'spec/javascripts/*_spec.js.coffee'
]
});
};
</pre>

Start Karma Server
<pre>
karma start spec/javascripts/restauranteur.conf.js
</pre>

Go to go to http://localhost:9876/ and test will run and be successful.

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-15T04:32:57Z

Rarora4: /* Why AngularJS + Rails? */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.<ref>http://code.tutsplus.com/tutorials/5-awesome-angularjs-features--net-25651</ref>

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.<ref>https://www.codeschool.com/courses/shaping-up-with-angular-js</ref>

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.<ref>http://joelhooks.com/blog/2013/09/15/why-i-built-an-angularjs-training-site-on-rails</ref>

==Getting Started<ref>http://sebastien.saunier.me/blog/2014/02/04/angular--rails-with-no-fuss.html</ref>==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: Restauranteur <ref>http://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails</ref>

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

then run Migration
<pre>
$ rake db:migrate
</pre>

and finally Seed the database:
<pre>
# db/seeds.rb

Restaurant.create([
{ name: "The French Laundry" },
{ name: "Chez Panisse" },
{ name: "Bouchon" },
{ name: "Noma" },
{ name: "Taco Bell" },
])
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own '''Controller'''. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller '''HomeCtrl'''

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

===Step 4: Create Templates and Modify Controller ===

Make changes in the layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

Make template for restaurants (this can be created anywhere), we are making it under public directory and create and index page:

<pre>


<a href="/#">index</a>
<ul ng-repeat="restaurant in restaurants">
<li><a ng-click="viewRestaurant(restaurant.id)">{{ restaurant.name }}</a></li>
</ul>
</pre>

create Restaurant Index Controller
<pre>
# app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.restaurants = []
$http.get('./restaurants.json').success((data) ->
$scope.restaurants = data
)
]
</pre>

===Step 5: Adjust Routing in main.js===

Now modify routing so that new Restaurant Index page is called.

<pre>
# app/assets/javascripts/main.js.coffee

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
$routeProvider.
when('/restaurants', {
templateUrl: '../templates/restaurants/index.html',
controller: 'RestaurantIndexCtrl'
})
])
</pre>

It's done! Now go to URI /#/restaurants to see list of Restaurants we added.

==Testing==
For testing we are going to use Rspec, Karma, and Jasmine framework. We start by first installing Karma server:

====For Ubuntu====
<pre>
sudo npm install -g karma
sudo npm install -g karma-ng-scenario
</pre>

====For Windows====
Install via Git bash
<pre>
npm install -g karma
</pre>

===Step by step Testing Procedure===
Create Test Folder
<pre>
mkdir spec/javascripts
</pre>

Write Tests
<pre>
# spec/javascripts/controllers_spec.js.coffee

describe "Restauranteur controllers", ->
beforeEach module("restauranteur")

describe "RestaurantIndexCtrl", ->
it "should set restaurants to an empty array", inject(($controller) ->
scope = {}
ctrl = $controller("RestaurantIndexCtrl",
$scope: scope
)
expect(scope.restaurants.length).toBe 0
)
</pre>

Add Configurations
<pre>
// spec/javascripts/restauranteur.conf.js

module.exports = function(config) {
config.set({
basePath: '../..',

frameworks: ['jasmine'],

autoWatch: true,

preprocessors: {
'**/*.coffee': 'coffee'
},

files: [
'app/assets/javascripts/angular.js',
'app/assets/javascripts/angular-mocks.js',
'app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee',
'app/assets/javascripts/angular/*',
'spec/javascripts/*_spec.js.coffee'
]
});
};
</pre>

Start Karma Server
<pre>
karma start spec/javascripts/restauranteur.conf.js
</pre>

Go to go to http://localhost:9876/ and test will run and be successful.

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-15T04:31:55Z

Rarora4:

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.<ref>http://code.tutsplus.com/tutorials/5-awesome-angularjs-features--net-25651</ref>

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.<ref>https://www.codeschool.com/courses/shaping-up-with-angular-js</ref>

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started<ref>http://sebastien.saunier.me/blog/2014/02/04/angular--rails-with-no-fuss.html</ref>==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: Restauranteur <ref>http://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails</ref>

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

then run Migration
<pre>
$ rake db:migrate
</pre>

and finally Seed the database:
<pre>
# db/seeds.rb

Restaurant.create([
{ name: "The French Laundry" },
{ name: "Chez Panisse" },
{ name: "Bouchon" },
{ name: "Noma" },
{ name: "Taco Bell" },
])
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own '''Controller'''. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller '''HomeCtrl'''

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

===Step 4: Create Templates and Modify Controller ===

Make changes in the layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

Make template for restaurants (this can be created anywhere), we are making it under public directory and create and index page:

<pre>


<a href="/#">index</a>
<ul ng-repeat="restaurant in restaurants">
<li><a ng-click="viewRestaurant(restaurant.id)">{{ restaurant.name }}</a></li>
</ul>
</pre>

create Restaurant Index Controller
<pre>
# app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.restaurants = []
$http.get('./restaurants.json').success((data) ->
$scope.restaurants = data
)
]
</pre>

===Step 5: Adjust Routing in main.js===

Now modify routing so that new Restaurant Index page is called.

<pre>
# app/assets/javascripts/main.js.coffee

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
$routeProvider.
when('/restaurants', {
templateUrl: '../templates/restaurants/index.html',
controller: 'RestaurantIndexCtrl'
})
])
</pre>

It's done! Now go to URI /#/restaurants to see list of Restaurants we added.

==Testing==
For testing we are going to use Rspec, Karma, and Jasmine framework. We start by first installing Karma server:

====For Ubuntu====
<pre>
sudo npm install -g karma
sudo npm install -g karma-ng-scenario
</pre>

====For Windows====
Install via Git bash
<pre>
npm install -g karma
</pre>

===Step by step Testing Procedure===
Create Test Folder
<pre>
mkdir spec/javascripts
</pre>

Write Tests
<pre>
# spec/javascripts/controllers_spec.js.coffee

describe "Restauranteur controllers", ->
beforeEach module("restauranteur")

describe "RestaurantIndexCtrl", ->
it "should set restaurants to an empty array", inject(($controller) ->
scope = {}
ctrl = $controller("RestaurantIndexCtrl",
$scope: scope
)
expect(scope.restaurants.length).toBe 0
)
</pre>

Add Configurations
<pre>
// spec/javascripts/restauranteur.conf.js

module.exports = function(config) {
config.set({
basePath: '../..',

frameworks: ['jasmine'],

autoWatch: true,

preprocessors: {
'**/*.coffee': 'coffee'
},

files: [
'app/assets/javascripts/angular.js',
'app/assets/javascripts/angular-mocks.js',
'app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee',
'app/assets/javascripts/angular/*',
'spec/javascripts/*_spec.js.coffee'
]
});
};
</pre>

Start Karma Server
<pre>
karma start spec/javascripts/restauranteur.conf.js
</pre>

Go to go to http://localhost:9876/ and test will run and be successful.

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-15T04:28:13Z

Rarora4: /* Why AngularJS + Rails? */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.<ref>https://www.codeschool.com/courses/shaping-up-with-angular-js</ref>

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started<ref>http://sebastien.saunier.me/blog/2014/02/04/angular--rails-with-no-fuss.html</ref>==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: Restauranteur <ref>http://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails</ref>

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

then run Migration
<pre>
$ rake db:migrate
</pre>

and finally Seed the database:
<pre>
# db/seeds.rb

Restaurant.create([
{ name: "The French Laundry" },
{ name: "Chez Panisse" },
{ name: "Bouchon" },
{ name: "Noma" },
{ name: "Taco Bell" },
])
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own '''Controller'''. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller '''HomeCtrl'''

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

===Step 4: Create Templates and Modify Controller ===

Make changes in the layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

Make template for restaurants (this can be created anywhere), we are making it under public directory and create and index page:

<pre>


<a href="/#">index</a>
<ul ng-repeat="restaurant in restaurants">
<li><a ng-click="viewRestaurant(restaurant.id)">{{ restaurant.name }}</a></li>
</ul>
</pre>

create Restaurant Index Controller
<pre>
# app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.restaurants = []
$http.get('./restaurants.json').success((data) ->
$scope.restaurants = data
)
]
</pre>

===Step 5: Adjust Routing in main.js===

Now modify routing so that new Restaurant Index page is called.

<pre>
# app/assets/javascripts/main.js.coffee

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
$routeProvider.
when('/restaurants', {
templateUrl: '../templates/restaurants/index.html',
controller: 'RestaurantIndexCtrl'
})
])
</pre>

It's done! Now go to URI /#/restaurants to see list of Restaurants we added.

==Testing==
For testing we are going to use Rspec, Karma, and Jasmine framework. We start by first installing Karma server:

====For Ubuntu====
<pre>
sudo npm install -g karma
sudo npm install -g karma-ng-scenario
</pre>

====For Windows====
Install via Git bash
<pre>
npm install -g karma
</pre>

===Step by step Testing Procedure===
Create Test Folder
<pre>
mkdir spec/javascripts
</pre>

Write Tests
<pre>
# spec/javascripts/controllers_spec.js.coffee

describe "Restauranteur controllers", ->
beforeEach module("restauranteur")

describe "RestaurantIndexCtrl", ->
it "should set restaurants to an empty array", inject(($controller) ->
scope = {}
ctrl = $controller("RestaurantIndexCtrl",
$scope: scope
)
expect(scope.restaurants.length).toBe 0
)
</pre>

Add Configurations
<pre>
// spec/javascripts/restauranteur.conf.js

module.exports = function(config) {
config.set({
basePath: '../..',

frameworks: ['jasmine'],

autoWatch: true,

preprocessors: {
'**/*.coffee': 'coffee'
},

files: [
'app/assets/javascripts/angular.js',
'app/assets/javascripts/angular-mocks.js',
'app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee',
'app/assets/javascripts/angular/*',
'spec/javascripts/*_spec.js.coffee'
]
});
};
</pre>

Start Karma Server
<pre>
karma start spec/javascripts/restauranteur.conf.js
</pre>

Go to go to http://localhost:9876/ and test will run and be successful.

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-15T04:25:15Z

Rarora4: /* Step 1: Creating Base Rails app */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started<ref>http://sebastien.saunier.me/blog/2014/02/04/angular--rails-with-no-fuss.html</ref>==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: Restauranteur <ref>http://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails</ref>

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

then run Migration
<pre>
$ rake db:migrate
</pre>

and finally Seed the database:
<pre>
# db/seeds.rb

Restaurant.create([
{ name: "The French Laundry" },
{ name: "Chez Panisse" },
{ name: "Bouchon" },
{ name: "Noma" },
{ name: "Taco Bell" },
])
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own '''Controller'''. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller '''HomeCtrl'''

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

===Step 4: Create Templates and Modify Controller ===

Make changes in the layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

Make template for restaurants (this can be created anywhere), we are making it under public directory and create and index page:

<pre>


<a href="/#">index</a>
<ul ng-repeat="restaurant in restaurants">
<li><a ng-click="viewRestaurant(restaurant.id)">{{ restaurant.name }}</a></li>
</ul>
</pre>

create Restaurant Index Controller
<pre>
# app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.restaurants = []
$http.get('./restaurants.json').success((data) ->
$scope.restaurants = data
)
]
</pre>

===Step 5: Adjust Routing in main.js===

Now modify routing so that new Restaurant Index page is called.

<pre>
# app/assets/javascripts/main.js.coffee

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
$routeProvider.
when('/restaurants', {
templateUrl: '../templates/restaurants/index.html',
controller: 'RestaurantIndexCtrl'
})
])
</pre>

It's done! Now go to URI /#/restaurants to see list of Restaurants we added.

==Testing==
For testing we are going to use Rspec, Karma, and Jasmine framework. We start by first installing Karma server:

====For Ubuntu====
<pre>
sudo npm install -g karma
sudo npm install -g karma-ng-scenario
</pre>

====For Windows====
Install via Git bash
<pre>
npm install -g karma
</pre>

===Step by step Testing Procedure===
Create Test Folder
<pre>
mkdir spec/javascripts
</pre>

Write Tests
<pre>
# spec/javascripts/controllers_spec.js.coffee

describe "Restauranteur controllers", ->
beforeEach module("restauranteur")

describe "RestaurantIndexCtrl", ->
it "should set restaurants to an empty array", inject(($controller) ->
scope = {}
ctrl = $controller("RestaurantIndexCtrl",
$scope: scope
)
expect(scope.restaurants.length).toBe 0
)
</pre>

Add Configurations
<pre>
// spec/javascripts/restauranteur.conf.js

module.exports = function(config) {
config.set({
basePath: '../..',

frameworks: ['jasmine'],

autoWatch: true,

preprocessors: {
'**/*.coffee': 'coffee'
},

files: [
'app/assets/javascripts/angular.js',
'app/assets/javascripts/angular-mocks.js',
'app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee',
'app/assets/javascripts/angular/*',
'spec/javascripts/*_spec.js.coffee'
]
});
};
</pre>

Start Karma Server
<pre>
karma start spec/javascripts/restauranteur.conf.js
</pre>

Go to go to http://localhost:9876/ and test will run and be successful.

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:56:48Z

Rarora4: /* Testing */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [http://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

then run Migration
<pre>
$ rake db:migrate
</pre>

and finally Seed the database:
<pre>
# db/seeds.rb

Restaurant.create([
{ name: "The French Laundry" },
{ name: "Chez Panisse" },
{ name: "Bouchon" },
{ name: "Noma" },
{ name: "Taco Bell" },
])
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own '''Controller'''. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller '''HomeCtrl'''

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

===Step 4: Create Templates and Modify Controller ===

Make changes in the layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

Make template for restaurants (this can be created anywhere), we are making it under public directory and create and index page:

<pre>


<a href="/#">index</a>
<ul ng-repeat="restaurant in restaurants">
<li><a ng-click="viewRestaurant(restaurant.id)">{{ restaurant.name }}</a></li>
</ul>
</pre>

create Restaurant Index Controller
<pre>
# app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.restaurants = []
$http.get('./restaurants.json').success((data) ->
$scope.restaurants = data
)
]
</pre>

===Step 5: Adjust Routing in main.js===

Now modify routing so that new Restaurant Index page is called.

<pre>
# app/assets/javascripts/main.js.coffee

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
$routeProvider.
when('/restaurants', {
templateUrl: '../templates/restaurants/index.html',
controller: 'RestaurantIndexCtrl'
})
])
</pre>

It's done! Now go to URI /#/restaurants to see list of Restaurants we added.

==Testing==
For testing we are going to use Rspec, Karma, and Jasmine framework. We start by first installing Karma server:

====For Ubuntu====
<pre>
sudo npm install -g karma
sudo npm install -g karma-ng-scenario
</pre>

====For Windows====
Install via Git bash
<pre>
npm install -g karma
</pre>

===Step by step Testing Procedure===
Create Test Folder
<pre>
mkdir spec/javascripts
</pre>

Write Tests
<pre>
# spec/javascripts/controllers_spec.js.coffee

describe "Restauranteur controllers", ->
beforeEach module("restauranteur")

describe "RestaurantIndexCtrl", ->
it "should set restaurants to an empty array", inject(($controller) ->
scope = {}
ctrl = $controller("RestaurantIndexCtrl",
$scope: scope
)
expect(scope.restaurants.length).toBe 0
)
</pre>

Add Configurations
<pre>
// spec/javascripts/restauranteur.conf.js

module.exports = function(config) {
config.set({
basePath: '../..',

frameworks: ['jasmine'],

autoWatch: true,

preprocessors: {
'**/*.coffee': 'coffee'
},

files: [
'app/assets/javascripts/angular.js',
'app/assets/javascripts/angular-mocks.js',
'app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee',
'app/assets/javascripts/angular/*',
'spec/javascripts/*_spec.js.coffee'
]
});
};
</pre>

Start Karma Server
<pre>
karma start spec/javascripts/restauranteur.conf.js
</pre>

Go to go to http://localhost:9876/ and test will run and be successful.

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:54:29Z

Rarora4: /* Testing */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [http://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

then run Migration
<pre>
$ rake db:migrate
</pre>

and finally Seed the database:
<pre>
# db/seeds.rb

Restaurant.create([
{ name: "The French Laundry" },
{ name: "Chez Panisse" },
{ name: "Bouchon" },
{ name: "Noma" },
{ name: "Taco Bell" },
])
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own '''Controller'''. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller '''HomeCtrl'''

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

===Step 4: Create Templates and Modify Controller ===

Make changes in the layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

Make template for restaurants (this can be created anywhere), we are making it under public directory and create and index page:

<pre>


<a href="/#">index</a>
<ul ng-repeat="restaurant in restaurants">
<li><a ng-click="viewRestaurant(restaurant.id)">{{ restaurant.name }}</a></li>
</ul>
</pre>

create Restaurant Index Controller
<pre>
# app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.restaurants = []
$http.get('./restaurants.json').success((data) ->
$scope.restaurants = data
)
]
</pre>

===Step 5: Adjust Routing in main.js===

Now modify routing so that new Restaurant Index page is called.

<pre>
# app/assets/javascripts/main.js.coffee

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
$routeProvider.
when('/restaurants', {
templateUrl: '../templates/restaurants/index.html',
controller: 'RestaurantIndexCtrl'
})
])
</pre>

It's done! Now go to URI /#/restaurants to see list of Restaurants we added.

==Testing==
For testing we are going to use Rspec, Karma, and Jasmine framework. We start by first installing Karma server:

===For Ubuntu===
<pre>
sudo npm install -g karma
sudo npm install -g karma-ng-scenario
</pre>

===For Windows===
Install via Git bash
<pre>
npm install -g karma
</pre>

===Create Test Folder===
<pre>
mkdir spec/javascripts
</pre>

===Write Tests===
<pre>
# spec/javascripts/controllers_spec.js.coffee

describe "Restauranteur controllers", ->
beforeEach module("restauranteur")

describe "RestaurantIndexCtrl", ->
it "should set restaurants to an empty array", inject(($controller) ->
scope = {}
ctrl = $controller("RestaurantIndexCtrl",
$scope: scope
)
expect(scope.restaurants.length).toBe 0
)
</pre>

===Add Configurations===
<pre>
// spec/javascripts/restauranteur.conf.js

module.exports = function(config) {
config.set({
basePath: '../..',

frameworks: ['jasmine'],

autoWatch: true,

preprocessors: {
'**/*.coffee': 'coffee'
},

files: [
'app/assets/javascripts/angular.js',
'app/assets/javascripts/angular-mocks.js',
'app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee',
'app/assets/javascripts/angular/*',
'spec/javascripts/*_spec.js.coffee'
]
});
};
</pre>

===Start Karma Server===
<pre>
karma start spec/javascripts/restauranteur.conf.js
</pre>

Go to go to http://localhost:9876/ and test will run and be successful.

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:40:56Z

Rarora4: /* AngularJS + Rails */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [http://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

then run Migration
<pre>
$ rake db:migrate
</pre>

and finally Seed the database:
<pre>
# db/seeds.rb

Restaurant.create([
{ name: "The French Laundry" },
{ name: "Chez Panisse" },
{ name: "Bouchon" },
{ name: "Noma" },
{ name: "Taco Bell" },
])
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own '''Controller'''. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller '''HomeCtrl'''

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

===Step 4: Create Templates and Modify Controller ===

Make changes in the layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

Make template for restaurants (this can be created anywhere), we are making it under public directory and create and index page:

<pre>


<a href="/#">index</a>
<ul ng-repeat="restaurant in restaurants">
<li><a ng-click="viewRestaurant(restaurant.id)">{{ restaurant.name }}</a></li>
</ul>
</pre>

create Restaurant Index Controller
<pre>
# app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.restaurants = []
$http.get('./restaurants.json').success((data) ->
$scope.restaurants = data
)
]
</pre>

===Step 5: Adjust Routing in main.js===

Now modify routing so that new Restaurant Index page is called.

<pre>
# app/assets/javascripts/main.js.coffee

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
$routeProvider.
when('/restaurants', {
templateUrl: '../templates/restaurants/index.html',
controller: 'RestaurantIndexCtrl'
})
])
</pre>

It's done! Now go to URI /#/restaurants to see list of Restaurants we added.

==Testing==

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:39:55Z

Rarora4: /* Getting Started */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [http://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

then run Migration
<pre>
$ rake db:migrate
</pre>

and finally Seed the database:
<pre>
# db/seeds.rb

Restaurant.create([
{ name: "The French Laundry" },
{ name: "Chez Panisse" },
{ name: "Bouchon" },
{ name: "Noma" },
{ name: "Taco Bell" },
])
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own '''Controller'''. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller '''HomeCtrl'''

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

===Step 4: Create Templates and Modify Controller ===

Make changes in the layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

Make template for restaurants (this can be created anywhere), we are making it under public directory and create and index page:

<pre>


<a href="/#">index</a>
<ul ng-repeat="restaurant in restaurants">
<li><a ng-click="viewRestaurant(restaurant.id)">{{ restaurant.name }}</a></li>
</ul>
</pre>

create Restaurant Index Controller
<pre>
# app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.restaurants = []
$http.get('./restaurants.json').success((data) ->
$scope.restaurants = data
)
]
</pre>

===Step 5: Adjust Routing in main.js===

Now modify routing so that new Restaurant Index page is called.

<pre>
# app/assets/javascripts/main.js.coffee

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
$routeProvider.
when('/restaurants', {
templateUrl: '../templates/restaurants/index.html',
controller: 'RestaurantIndexCtrl'
})
])
</pre>

It's done! Now go to URI /#/restaurants to see list of Restaurants we added.

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:39:27Z

Rarora4: /* Getting Started */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

then run Migration
<pre>
$ rake db:migrate
</pre>

and finally Seed the database:
<pre>
# db/seeds.rb

Restaurant.create([
{ name: "The French Laundry" },
{ name: "Chez Panisse" },
{ name: "Bouchon" },
{ name: "Noma" },
{ name: "Taco Bell" },
])
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own '''Controller'''. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller '''HomeCtrl'''

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

===Step 4: Create Templates and Modify Controller ===

Make changes in the layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

Make template for restaurants (this can be created anywhere), we are making it under public directory and create and index page:

<pre>


<a href="/#">index</a>
<ul ng-repeat="restaurant in restaurants">
<li><a ng-click="viewRestaurant(restaurant.id)">{{ restaurant.name }}</a></li>
</ul>
</pre>

create Restaurant Index Controller
<pre>
# app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.restaurants = []
$http.get('./restaurants.json').success((data) ->
$scope.restaurants = data
)
]
</pre>

===Step 5: Adjust Routing in main.js===

Now modify routing so that new Restaurant Index page is called.

<pre>
# app/assets/javascripts/main.js.coffee

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
$routeProvider.
when('/restaurants', {
templateUrl: '../templates/restaurants/index.html',
controller: 'RestaurantIndexCtrl'
})
])
</pre>

It's done! Now go to URI /#/restaurants to see list of Restaurants we added.

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:36:01Z

Rarora4: /* Getting Started */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails/ Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

then run Migration
<pre>
$ rake db:migrate
</pre>

and finally Seed the database:
<pre>
# db/seeds.rb

Restaurant.create([
{ name: "The French Laundry" },
{ name: "Chez Panisse" },
{ name: "Bouchon" },
{ name: "Noma" },
{ name: "Taco Bell" },
])
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own '''Controller'''. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller '''HomeCtrl'''

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

===Step 4: Create Templates and Modify Controller ===

Make changes in the layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

Make template for restaurants (this can be created anywhere), we are making it under public directory and create and index page:

<pre>


<a href="/#">index</a>
<ul ng-repeat="restaurant in restaurants">
<li><a ng-click="viewRestaurant(restaurant.id)">{{ restaurant.name }}</a></li>
</ul>
</pre>

create Restaurant Index Controller
<pre>
# app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.restaurants = []
$http.get('./restaurants.json').success((data) ->
$scope.restaurants = data
)
]
</pre>

===Step 5: Adjust Routing in main.js===

Now modify routing so that new Restaurant Index page is called.

<pre>
# app/assets/javascripts/main.js.coffee

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
$routeProvider.
when('/restaurants', {
templateUrl: '../templates/restaurants/index.html',
controller: 'RestaurantIndexCtrl'
})
])
</pre>

It's done! Now go to URI /#/restaurants to see list of Restaurants we added.

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:24:54Z

Rarora4: /* Step 3: Introduce AngularJS */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails/ Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

then run Migration
<pre>
$ rake db:migrate
</pre>

and finally Seed the database:
<pre>
# db/seeds.rb

Restaurant.create([
{ name: "The French Laundry" },
{ name: "Chez Panisse" },
{ name: "Bouchon" },
{ name: "Noma" },
{ name: "Taco Bell" },
])
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own '''Controller'''. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller '''HomeCtrl'''

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

make changes to layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:24:18Z

Rarora4: /* Step 2: Creating the Restaurant model */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails/ Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

then run Migration
<pre>
$ rake db:migrate
</pre>

and finally Seed the database:
<pre>
# db/seeds.rb

Restaurant.create([
{ name: "The French Laundry" },
{ name: "Chez Panisse" },
{ name: "Bouchon" },
{ name: "Noma" },
{ name: "Taco Bell" },
])
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own Controller. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller HomeCtrl

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

make changes to layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:22:18Z

Rarora4: /* Step 3: Introduce AngularJS */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails/ Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

and then run Migration
<pre>
$ rake db:migrate
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own Controller. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller HomeCtrl

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

make changes to layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:21:42Z

Rarora4: /* Step 3: Introduce AngularJS */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails/ Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

and then run Migration
<pre>
$ rake db:migrate
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own Controller. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller HomeCtrl

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

make changes to layout:
<pre>


<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:21:26Z

Rarora4: /* Step 3: Introduce AngularJS */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails/ Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

and then run Migration
<pre>
$ rake db:migrate
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own Controller. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller HomeCtrl

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

make changes to layout:
<pre>



<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:21:02Z

Rarora4: /* Step 3: Introduce AngularJS */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails/ Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

and then run Migration
<pre>
$ rake db:migrate
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own Controller. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller HomeCtrl

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>


make changes to layout:
<pre>
<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:20:23Z

Rarora4: /* Step 3: Introduce AngularJS */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails/ Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

and then run Migration
<pre>
$ rake db:migrate
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own Controller. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller HomeCtrl

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

make changes to layout:
<pre>
<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:19:47Z

Rarora4: /* Step 3: Introduce AngularJS */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails/ Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

and then run Migration
<pre>
$ rake db:migrate
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own Controller. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller HomeCtrl

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

make changes to layout:
<pre>
<html> '''==>''' <html ng-app="restauranteur">

<%= yield %> '''==>''' <div ng-view> <%= yield %> </div>
</pre>

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:19:23Z

Rarora4: /* Step 3: Introduce AngularJS */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails/ Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

and then run Migration
<pre>
$ rake db:migrate
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own Controller. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller HomeCtrl

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

make changes to layout:
<pre>
<html> <b>==></b> <html ng-app="restauranteur">

<%= yield %> <b>==></b> <div ng-view> <%= yield %> </div>
</pre>

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:18:45Z

Rarora4: /* Getting Started */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails/ Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

and then run Migration
<pre>
$ rake db:migrate
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own Controller. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller HomeCtrl

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

make changes to layout:
<pre>
<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:18:24Z

Rarora4: /* Step 3: Introduce AngularJS */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails/ Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

and then run Migration
<pre>
$ rake db:migrate
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own Controller. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller HomeCtrl

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

make changes to layout:
<pre>
<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:17:48Z

Rarora4: /* Step 2: Creating the Restaurant model */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails/ Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

and then run Migration
<pre>
$ rake db:migrate
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own Controller. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller HomeCtrl

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

Make Changes to layout:
<pre>
<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:17:05Z

Rarora4: /* Getting Started */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails/ Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

and then Run Migration
<pre>
$ rake db:migrate
</pre>

===Step 3: Introduce AngularJS ===
Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:
<pre>
//= require angular
//= require main
</pre>

Now, AngularJS being an MVC framework requires its own Controller. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller HomeCtrl

<pre>
# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

</pre>

Make Changes to layout:
<pre>
<html> ==> <html ng-app="restauranteur">

<%= yield %> ==> <div ng-view> <%= yield %> </div>
</pre>

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>

CSC/ECE 517 Fall 2014/ch1b 34 kr

2014-10-07T05:03:48Z

Rarora4: /* Getting Started */

= '''AngularJS + Rails''' =

==Overview==

[http://angularjs.org// AngularJS] is an [http://en.wikipedia.org/wiki/Open_source open source] client-side [http://en.wikipedia.org/wiki/JavaScript Javascript] framework for creating web applications with [http://en.wikipedia.org/wiki/Dynamic_web_page dynamic web pages] and is maintained by [http://www.google.com/ Google]. AngularJS has extended [http://en.wikipedia.org/wiki/HTML HTML's] syntax and implemented it with [http://mrbool.com/mvc-in-angularjs/28962 Model-View-Controller] architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like [http://docs.angularjs.org/guide/databinding data binding] and [http://docs.angularjs.org/guide/di dependency injection] which helps shorten the crude javascript code. It has a simple [http://en.wikipedia.org/wiki/Object_model object model] that supports testability and clean code organization.

[http://rubyonrails.org/ Rails] is an open source web application framework written in [http://www.ruby-lang.org/en/ Ruby] by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

{| border="1" class="wikitable" style="float:{{{align|right}}}"
|colspan="2" align="center" |[[File:angularjs+rails.jpg|center|AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>]]
|-
|'''Name'''||[http://angularjs.org// AngularJS] + [http://rubyonrails.org/ Rails]
|-
|'''Category'''||[http://en.wikipedia.org/wiki/Open-source_software Open Source Software]
|-
|'''Type'''||[http://en.wikipedia.org/wiki/Web_application_framework Web Application Framework]
|-

__TOC__

==Background==

===AngularJS===

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

===Rails===
Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

==Why AngularJS + Rails?==

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes [http://en.wikipedia.org/wiki/Search_engine_optimization Search Engine Optimization] extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.

==Getting Started==
===Prerequisites===

=====AngularJS=====

Following are the pre-requisites for learning AngularJS:
# Moderate knowledge of HTML, JavaScript and CSS.
# Basic Model-View-Controller concepts.
# The [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model].
# JavaScript functions, events, and error handling.

=====Rails=====

# Comprehensive knowledge of Ruby.
# Moderate knowledge of databases.
# Basic Model-View-Controller concepts.

===Download AngularJS===

Download AngularJS from [https://angularjs.org/ AngularJS] website. We need to download file: angular-mocks.js

===Step 1: Creating Base Rails app===

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: [https://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails/ Restauranteur]

====Initial Setup====
To create project:
<pre>
$ rails new restauranteur --database=postgresql --skip-test-unit
</pre>

To create PostgresSQL user:

<pre>
$ createuser -P -s -e restauranteur
</pre>

Add Rspec to your Gemfile:
<pre>
gem "rspec-rails", "~> 2.14.0"
</pre>

Install Rspec
<pre>
$ bundle install
$ rails g rspec:install
</pre>

Create the database:
<pre>
$ rake db:create
</pre>

===Step 2: Creating the Restaurant model===
Our next step is to create a model class in Rails
<pre>
$ rails generate scaffold restaurant name:string
</pre>

Make sure that Restaurant Names are unique:
<pre>
# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
def change
create_table :restaurants do |t|
t.string :name

t.timestamps
end

# Add the following line
add_index :restaurants, :name, unique: true
end
end
</pre>

Add this in Model:
<pre>
class Restaurant < ActiveRecord::Base
validates :name, presence: true, uniqueness: { case_sensitive: false }
end
</pre>

and then Run Migration
<pre>
$ rake db:migrate
</pre>

==Comparison with other front-end frameworks==

The most popular front end frameworks these days include AngularJS, [http://backbonejs.org/ BackboneJS] and [http://emberjs.com/ EmberJS]. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

===Community===

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more [http://stackoverflow.com/questions/tagged/angularjs StackOverflow questions] , [https://www.youtube.com/user/angularjs YouTube tutorials], [http://github.com/ GitHub] Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

===Framework Size===

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster.
If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large.
Thus, AngularJS is the clear winner among these frameworks.

===Templating===

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of [http://www.creativebloq.com/web-design/templating-engines-9134396 templates] available that an be used.
BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

=====AngularJS=====

Angular's templating engine simply extends HTML syntax. It uses [https://docs.angularjs.org/guide/expression binding expressions] to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<pre>
<ul>
<li ng-repeat="recipe in recipes"
title="{{recipe.title}}">
{{recipe.description}}
</li>
</ul>
</pre>

=====EmberJS=====

EmberJS uses [http://handlebarsjs.com/ Handlebars] template engine. Handlebars is an extension of [http://mustache.github.io/ Mustache] templating engine. It does not understand the [http://en.wikipedia.org/wiki/Document_Object_Model Document Object Model] structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called [http://talks.erikbryn.com/htmlbars HTMLBars] which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<pre>
<ul>
{{#each recipes}}
<li {{bind-attr title=name}}>
{{desc}}
</li>
{{/each}}
</ul>
</pre>

=====BackboneJS=====

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, [http://underscorejs.org/ Underscore] is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<pre>
<ul>
<% _.each(recipes, function(recipe) { %>
<li title="<%- recipe.name %>">
<%- recipe.desc %>
</li>
<% }); %>
</ul>
</pre>

==Reference Material==

Following are the references to learn Ruby on which Rails is based :

#[http://rubymonk.com/ Ruby Monk]
#[http://rubylearning.com/ Ruby Learning]

Following are the references to learn Rails :

#[http://railsforzombies.org/ Rails for Zombies]
#[http://www.railstutorial.org/book Ruby on Rails Tutorial]
#[http://guides.rubyonrails.org/index.html Rails Guides]

Following are the references to learn AngularJS :

#[http://angularjs.org/ AngularJS]
#[http://www.w3schools.com/angular/ AngularJS Tutorials]
#[http://egghead.io/lessons AngularJS Training Videos]

==References==
<references/>