CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS: Difference between revisions
No edit summary |
|||
| Line 7: | Line 7: | ||
=== Advantages of ReactJS === | === Advantages of ReactJS === | ||
<ul> | |||
easy to know how a component is rendered, you just look at the render function. | <li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <emph>divs</emph>. | ||
JSX makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged/combined with each other. | JSX makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged/combined with each other. | ||
you can render React on the server-side. | you can render React on the server-side. | ||
| Line 14: | Line 14: | ||
it ensures readability and makes maintainability easier. | it ensures readability and makes maintainability easier. | ||
you can use React with any framework (Backbone.js, Angular.js) as it is only a view layer. | you can use React with any framework (Backbone.js, Angular.js) as it is only a view layer. | ||
</ul> | |||
== Current implementation == | == Current implementation == | ||
Revision as of 22:00, 9 November 2016
E1691 Convert Assignment Creation Form to ReactJS
This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.
React JS
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.
Advantages of ReactJS
- It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <emph>divs</emph>. JSX makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged/combined with each other. you can render React on the server-side. it is easy to test, and you can also integrate some tools like jest. it ensures readability and makes maintainability easier. you can use React with any framework (Backbone.js, Angular.js) as it is only a view layer.
Current implementation
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view. Implementing this in ReactJS, will eliminate these server requests. New assignemnt link will generae a popoup window, right there on the same view (url remains same) and will be provided with the same options. Saving the details will make the databse entry and close the popup window. So basically the processing is done at the client side except for the database change.
