CSC/ECE 517 Fall 2013/oss M801 as: Difference between revisions

From Expertiza_Wiki
Jump to navigation Jump to search
(Created page with "='''Dynamic style additions/removals'''= This article is about the project M801 - Dynamic style additions/removals, which is a part of the ongoing development on the Servo brows...")
 
No edit summary
 
(25 intermediate revisions by 2 users not shown)
Line 1: Line 1:
='''Dynamic style additions/removals'''=
='''Dynamic style additions/removals'''=


This article is about the project M801 - Dynamic style additions/removals, which is a part of the ongoing development on the Servo browser.
This article is about the project M801 - Dynamic style additions/removals, which is a part of the ongoing development on the Servo browser. Here you can find a brief description about the servo project, rust programming language, requirements of this particular project, setting up of the development environment and other relevant details.




Line 7: Line 7:


== '''Introduction''' ==
== '''Introduction''' ==
==='' What is Servo ''===  
==='' What is Servo?''===  


[http://en.wikipedia.org/wiki/Agile_software_development Agile development]<ref> http://en.wikipedia.org/wiki/Agile_software_development </ref> is a methodology where requirements and solutions are developed based on [http://en.wikipedia.org/wiki/Iterative_and_incremental_development iterative and incremental development] <ref>http://en.wikipedia.org/wiki/Iterative_and_incremental_development</ref> through collaboration between self-organizing, cross-functional teams. Using agile development methodology, a high quality software can be developed by programmers in a minimal amount of time. By involving continuous planning, testing, integration, and other forms of continuous evolution of both the project and the software, it focuses on empowering people to collaborate and make decisions together quickly and effectively. Some of the process under agile development includes adaptive planning, evolutionary development and delivery, a time-boxed iterative approach, and encourages rapid and flexible response to change. It is a conceptual framework that promotes foreseen interactions throughout the development cycle.
Servo is a research project whose goal is to develop a new Web browser engine that makes use of parallelism at many levels while eliminating common sources of bugs and security vulnerabilities associated with incorrect memory management and data races. Given that C++ is poorly suited to prevent these problems, Servo is written in [http://en.wikipedia.org/wiki/Rust_%28programming_language%29 Rust programming language]. Rust <ref>http://en.wikipedia.org/wiki/Iterative_and_incremental_development</ref> provides a task-parallel infrastructure and a strong type system that enforces memory safety and data race freedom.


===''Why do we need Agile development?''===
Servo is explicitly not aiming to create a full Web browser (except for demonstration and experimentation purposes). Rather it is focused on creating a solid, embeddable engine.


:*Visibility through active customer involvement
===''Challenges''===
:*Flexibility/Agility - ability to accept changes
:*Quality - testing integrated throughout the lifecycle
:*Speedy delivery
:*Customer satisfaction - feeling of a right product


[[File:agl39.jpg|center|alt=Agile development| Fig 1: Agile development]]
:*Performance. Parallel algorithms tend to involve tough trade offs and it must ensure that Rust itself has performance comparable to C++.
:*Data structures. Rust has new type system, specifically to enable safe parallel types and algorithms.
:*Language immaturity. The Rust compiler and language are yet to reach stability. Rust also has fewer libraries than C++ available. It is possible to bind to C++ libraries, but that involves more work than simply using the C++ header files.


===''Principles of agile development'' <ref> http://ruby.about.com/od/rubyonrails/a/agile.htm </ref> ===
===''What is this project about?''===
:*Iterative Development: Iterative development allows the clients to direct the development process in order to get the software features they want. Working software is delivered to the client at regular, short intervals. Client feedback is used to make changes to the software specifications at any stage in the development.


:*Open Collaboration: Open, unrestricted communication between programmers and clients are driving force behind agile development. The programming team must work closely with the customer and also communicate freely with each other. Face to face communication is preferred over specification documents, so working in an open office with no cubicles is ideal.
This project deals mainly with communicating between tasks.  


:*Adaptability: In agile development, changes to the software specifications are welcome even in late stages of development. Principles like Don't Repeat Yourself (DRY) are used to facilitate this. Customers gets hands-on experience with the development of the product, hence they will be able to better communicate their needs. Hence, changes in the market or company structure can be accomodated in the software at any time of the development cycle.
:*Test cases for dynamically appending, removing or modifying elements that causes a visible change.
:*Recognize when an element is being appended and get the element to the layout.
:*Network requests and removal of newly added stylesheets.


===''Some well known agile development methods''===
=='''Work done so far'''==
====''Testing Dynamic elements in HTML''====
Well-known agile software development methods include:
A test html code that runs successfully in Firefox/chrome is created first before testing the changes in Servo. The test cases are written in Javascript using the Document Object Model to manipulate the HTML elements. The test demonstrates the following:
:* [http://en.wikipedia.org/wiki/Specification_by_example Acceptance Test Driven Development (ATDD)]
:* [http://en.wikipedia.org/wiki/Dynamic_systems_development_method Dynamic Systems Development Method (DSDM)]
:* [http://en.wikipedia.org/wiki/Extreme_programming Extreme Programming (XP)]
:* [http://en.wikipedia.org/wiki/Feature-driven_development Feature Driven Development (FDD)]
:* [http://en.wikipedia.org/wiki/Lean_software_development Lean software development]
:* [http://en.wikipedia.org/wiki/Scrum_(software_development) Scrum]
:* [http://en.wikipedia.org/wiki/Story-driven_modeling Story-driven modeling]


=='''Why Use Ruby on Rails for Agile?'''==
:*appending a new link element that references a stylesheet.
===''Speedy and Effective Development''===
:*appending a new style element that contains rule.
:* Rails provides a very fast mode to write code in a multitude of languages such as html, [http://en.wikipedia.org/wiki/JavaScript javascript]<ref>http://en.wikipedia.org/wiki/JavaScript</ref>, ruby, css, etc that are used to build a web-application by providing preconfigured environments and wire-framed models.
:*removing an existing link element that references a stylesheet.
:* Smoother pace of work, thus putting less pressure on the debugger when it comes to debugging.
:*remove an existing style element that contains rules.
:* Without investing much resources, it can build business models and deliver functionalities, giving scope to customers to innovate and input faster.
:*modifying the content of a style element (such as removing all content).
:*modifying the href attribute of a link element that points at a stylesheet (such as referencing a new one that does not exist).


===''Open Source''===
===''Appending an element and sending it to layout''===
:* The frequently used features and common functionalities can be implemented easily as they are available as Ruby gems.
The appendchild() method in [https://github.com/tmuthuk/servo/blob/master/src/components/script/dom/node.rs node.rs] file has been [http://en.wikipedia.org/wiki/Code_refactoring refactored] to recognize when a style element is appended in an HTML file. Whenever a style element is appended, [https://github.com/mozilla/servo/blob/master/src/components/script/html/cssparse.rs CSS parser] need to be invoked that parses through the content present within the [http://www.w3schools.com/tags/tag_style.asp style element] and renders the output to the Layout task with all the CSS rules applied on the HTML content. Previously, the CSS style rules were applied only when the rules are appended using link element  as an external stylesheet.  
:* Provides developers the flexibility to customize and thus encouraging them to make large contributions.
===''Convention over Configuration''<ref>http://en.wikipedia.org/wiki/Convention_over_configuration</ref>===
:* By following this design paradigm, rails makes it simple for the developer as he need not specify or waste time to decide conventional aspects.  
:* On agreeing to implement simple and common things in a single way, it makes it easy for any new developer to work immediately on an existing project.  
:* This also rules out the need for explicit configuration ( except for unconventional/ customizable aspects).


=='''How Rails supports Agile Methodologies'''==
'''Functionality Added :''' First the code will check whether the new child node that has been appended is a style node. If yes, A dummy URL is set into the URL variable, and the content that is present within the style tag is wrapped by "NodeWrapping" implementation and stored in a variable called "data" Then both URL and data are assigned to Inline Provenance - A member of  enum variable "CSSTaskNewFile" that CSS parser uses to differentiate between link element and style element. Then css_spawn_parser method is called which does the parsing and renders the output to the Layout Task.
===''Generators and Scaffolds''<ref>http://guides.rubyonrails.org/getting_started.html</ref>===
:* The command “rails generate” uses templates to create models, controllers, views, databases, etc which helps to setup a test application.
  rails generate controller sample index
::The above command generates controllers sample_controller, views sample/index, assets, tests and other helpers with the route 'get' sample/index
:* The scaffolding can be easily done to deploy any basic web -application, and developers can extend them to implement their functionalities. This overcomes the initial hurdle.
  rails generate scaffold Exam course:string score:float
::It generates all the required directories for an MVC application for a model Exam and also creates db migration CreateExams


===''Ready Setup for Multi-environment''===
The following two files were modified to include the new code.
:* Rails application provides development, production and testing environments with built-in configurations setup and thus is a huge time saver for an application which is required to be deployed in multiple environments.
:* The built-in rails web-server has the development environment as the default environment.
:* Simple deployment allows developers to have face-face client meetings and thus make instantaneous changes based on the client requirements.


'''Built in configuration of DB in database.yml in development environment'''
:*'''[https://github.com/tmuthuk/servo/blob/master/src/test/html/content/test_collections.html test_collections.html]'''
  development:
:*'''[https://github.com/tmuthuk/servo/blob/master/src/components/script/dom/node.rs node.rs]'''
  adapter: sqlite3
  database: db/development.sqlite3
  pool: 5
  timeout: 5000


===''Test-Driven Development''<ref>http://www.agiledata.org/essays/tdd.html</ref>===
Below is a pictorial representation of the servo task communication
:* Built in mocking and stubbing frameworks are available which assists “how to write code”. This follows a red, green and refactor which is an important aspect of agile development.
[[File:task.jpg|center|alt=Sample task communication diagram| Fig 1: Servo Task Communication diagram]]
:* RSpec is one of the famous testing framework tools used with rails.  
:* Other testing tools can also be swapped in.


[[File:tdd39.jpg|center|alt=Test driven development| Fig 2: TDD cycle]]
:* Each box represents a Rust task.
:* Blue boxes represent the primary tasks in the browser pipeline.
:* Gray boxes represent tasks auxiliary to the browser pipeline.
:* White boxes represent worker tasks. Each such box represents several tasks, the precise number of which will vary with the workload.
:* Dashed lines indicate supervisor relationships.
:* Solid lines indicate communication channels.


'''Below is an example code for test driven development.'''


describe "Static pages" do
=='''Appendix'''==
  describe "Home page" do
===''Setting up Servo''===
    before { visit root_path }
There are two main steps to set up the environment for this project. Linux environment is preferred for setting up the environment as it is simple and easy.
    it "should have the words 'Backchannel App' in it" do
      expect(page).to have_content('Back Channel App')
  end
end


===''Don’t Repeat Yourself (DRY)''===
:* [https://github.com/mozilla/rust/wiki/Note-getting-started-developing-Rust Build Rust] <ref> https://github.com/mozilla/rust/wiki/Note-getting-started-developing-Rust </ref>
:* Repeated code is written in helpers and libraries, making a single destination and thus updations become simpler by updating at just one place.
:* [https://github.com/mozilla/servo Build Servo] <ref> https://github.com/mozilla/servo </ref>
:* [http://guides.rubyonrails.org/layouts_and_rendering.html Partials] are a way of rendering repeated HTML code. Rails understand a file which starts with an underscore, say, _partial.html as a partial to be included in the shared html file which renders it.
'''Using partials''':
:'''new.html.erb'''


  New Venture
  <%= error_messages_for :venture%>
  <%= render partial: "form", locals: {venture: @venture} %>


:'''_form.html.erb'''
  <%= form_for(venture) do |f| %> 
      Venture name
      <%= f.text_field :name %>
      <%= f.submit %>   
    <% end %>
===''Dependency Management''===
:* Rails acts more than a web framework by providing the necessary utility and support tools and adding dependencies to individual projects in a jiffy using the “bundler”.
:* This [http://bundler.io/ bundler]<ref>http://bundler.io/</ref> installs all the relevant gem files and also can be updated when more dependencies are added. No need to search for packages or jars.
===''Easy Migration''===
:* Rails helps you to keep easy track of database changes with the help of [http://guides.rubyonrails.org/migrations.html Migration]<ref>http://guides.rubyonrails.org/migrations.html</ref> Objects. It gives the flexibility to rollback and update.
:* It also allows you to maintain various versions of database for the multi-environment. On running rake db::migrate, the desired database is migrated and deployed with the working rails server.
:* New technologies such as [http://coffeescript.org/ Coffeescript] can also be easily embedded by installing the relevant gems thus adapting to the changing technology.
===''Assets Pipeline''<ref>http://guides.rubyonrails.org/asset_pipeline.html</ref>===
:* The assets pipeline is a new feature embedded in rails ( which is now extracted into sprockets-rails gem), concatenates and compresses javascript and css files.
:* This renders a web page with reduced number of requests from the browser as files are grouped and whitespaces are trimmed.
:* Precompiled files can also be attached.
=='''Comparison of Rails with other Agile Web Frameworks'''<ref>http://blog.websitesframeworks.com/2013/03/web-framework-comparison-matt-raible-opinion-138/</ref>==
:* This graph shows some of Rabies matrix weights to compare rails with other agile web frameworks. Among the ones compared, Rails is one of the most favourite and production efficient web framework used. GWT and GRAILS also are on par with RAILS.
:* The graph depicts the five main features that any Agile Web Framework should support and these are supported by Rails thus giving both clients and developers a simple and efficient way to develop several complex web applications.
[[File:Stats.JPG|25 px|upright=0.85|center|frame|alt=Puzzle globe logo|center| Fig 3:Comparison of Agile Web Frameworks]]
'''''Weights Explained'''''
:*''Components'': Reusable components accelerate development
:*''Templating'': Rating based on the number of UI templating options are available for the framework
:*''Plugins and Add-ons'': Rating based on if they framework has a plugin architecture and how many plugins are available
:*''Scalability'': Rating based on how much the framework relies on session state for functionality
:*''REST Support'': Does the framework have the ability to produce JSON and XML instead of simply returning HTML? Can it consume JSON and XML as well?
:*''Degree of Risk'': This rating is mostly for businesses. If the framework is new, there’s inherently some risk in choosing it for your applications
:*''Testing'': Tools for testing allow to find errors faster
=='''Future of Agile in Rails'''<ref> http://www.richappsconsulting.com/blog/blog-detail/agile-web-development-with-rails-an-overview/ </ref>==
Ruby on Rails is a framework that makes it easier to develop, deploy and maintain web applications. Soon after its initial release, Rails went from being an unfamiliar tool to being a wide-reaching phenomenon. It has become the framework of choice for the implementation of a wide range of Web 2.0 applications as it is both simple and subtle. Rails is often utilized by web developers for its suitability for short, client-driven projects. Many entrepreneurs and businesses have chosen Ruby on Rails to create their web application. Here are few well known web services that are run on Ruby on Rails:
* [https://twitter.com Twitter]
* [http://www.groupon.com Groupon]
* [https://soundcloud.com SoundCloud]
* [https://github.com/ GitHub]
* [http://www.yellow.com YellowPages]
* [http://www.shopify.com Shopify]
Due to its simple nature and easy to use features as well as the speed of project completion, Rails is an ideal platform for Agile development practices. Keeping in view its accordance with the Agile Manifesto, it is not hard to predict that Rails will be the future of Agile development.


=='''References'''==
=='''References'''==
<references/>
<references/>

Latest revision as of 04:12, 31 October 2013

Dynamic style additions/removals

This article is about the project M801 - Dynamic style additions/removals, which is a part of the ongoing development on the Servo browser. Here you can find a brief description about the servo project, rust programming language, requirements of this particular project, setting up of the development environment and other relevant details.


Introduction

What is Servo?

Servo is a research project whose goal is to develop a new Web browser engine that makes use of parallelism at many levels while eliminating common sources of bugs and security vulnerabilities associated with incorrect memory management and data races. Given that C++ is poorly suited to prevent these problems, Servo is written in Rust programming language. Rust <ref>http://en.wikipedia.org/wiki/Iterative_and_incremental_development</ref> provides a task-parallel infrastructure and a strong type system that enforces memory safety and data race freedom.

Servo is explicitly not aiming to create a full Web browser (except for demonstration and experimentation purposes). Rather it is focused on creating a solid, embeddable engine.

Challenges

  • Performance. Parallel algorithms tend to involve tough trade offs and it must ensure that Rust itself has performance comparable to C++.
  • Data structures. Rust has new type system, specifically to enable safe parallel types and algorithms.
  • Language immaturity. The Rust compiler and language are yet to reach stability. Rust also has fewer libraries than C++ available. It is possible to bind to C++ libraries, but that involves more work than simply using the C++ header files.

What is this project about?

This project deals mainly with communicating between tasks.

  • Test cases for dynamically appending, removing or modifying elements that causes a visible change.
  • Recognize when an element is being appended and get the element to the layout.
  • Network requests and removal of newly added stylesheets.

Work done so far

Testing Dynamic elements in HTML

A test html code that runs successfully in Firefox/chrome is created first before testing the changes in Servo. The test cases are written in Javascript using the Document Object Model to manipulate the HTML elements. The test demonstrates the following:

  • appending a new link element that references a stylesheet.
  • appending a new style element that contains rule.
  • removing an existing link element that references a stylesheet.
  • remove an existing style element that contains rules.
  • modifying the content of a style element (such as removing all content).
  • modifying the href attribute of a link element that points at a stylesheet (such as referencing a new one that does not exist).

Appending an element and sending it to layout

The appendchild() method in node.rs file has been refactored to recognize when a style element is appended in an HTML file. Whenever a style element is appended, CSS parser need to be invoked that parses through the content present within the style element and renders the output to the Layout task with all the CSS rules applied on the HTML content. Previously, the CSS style rules were applied only when the rules are appended using link element as an external stylesheet.

Functionality Added : First the code will check whether the new child node that has been appended is a style node. If yes, A dummy URL is set into the URL variable, and the content that is present within the style tag is wrapped by "NodeWrapping" implementation and stored in a variable called "data" Then both URL and data are assigned to Inline Provenance - A member of enum variable "CSSTaskNewFile" that CSS parser uses to differentiate between link element and style element. Then css_spawn_parser method is called which does the parsing and renders the output to the Layout Task.

The following two files were modified to include the new code.

Below is a pictorial representation of the servo task communication

Sample task communication diagram
Fig 1: Servo Task Communication diagram
  • Each box represents a Rust task.
  • Blue boxes represent the primary tasks in the browser pipeline.
  • Gray boxes represent tasks auxiliary to the browser pipeline.
  • White boxes represent worker tasks. Each such box represents several tasks, the precise number of which will vary with the workload.
  • Dashed lines indicate supervisor relationships.
  • Solid lines indicate communication channels.


Appendix

Setting up Servo

There are two main steps to set up the environment for this project. Linux environment is preferred for setting up the environment as it is simple and easy.


References

<references/>

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2013/oss_M801_as&oldid=82238"