Reactive Web Technology for Student Management Systems

Project Scope

The past decade has seen a rapid growth in the area of web development in terms of flexibility, scalability and improvement of user experience. While the nature of web applications provides the opportunity to expose end users to the newest features in a very timely manner, most of the improvements, however, are taken by them for granted. For web developers, on the other hand, this time has been unprecedentedly challenging with respect to both new and existing projects.

While some authors focus more on design aspects and others on market trends, they all have named Ruby on Rails 5, WebSockets and CSS Grid Layout, as eminent trends in 2017.

The work had to be carried out in the following steps: Get to know CSS Grid Layout and WebSockets as technologies to be investigated; Evaluate their problem-solving potential with regard to AoR; Minimize maintenance costs and code redundancy

Lessons Learned:

One important AoR aspect is the significantly and frequently changing number of involved developers . This web application served the entire time as a platform for various student projects, resulting in a complex structure and different development approaches.

The positive outcome was the opportunity for students to co-develop an application they can rely on to as user. The contribution of each person was desired and validated. However, the performance was mainly based on the outcome, and the development cycle lacked review rounds of peers or professors.

In my opinion, the academic environment in Germany provides a variety of interesting and novel topics to work on, but lucks one very essential aspect: the modern collaboration technics used in the enterprise world to ensure the continuous knowledge transfer and code quality.

That is why the most important lesson learned for me, was to decline an offer of a PhD position and further pursue my carrier in the enterprise world.

What is Admin on Rails

AoR is a web-based application written in Ruby on Rails for the administration of study courses in the Computer Science faculty at the RheinMain University of Applied Sciences. This application originated in the year 2009 as a useful one-man project for small organizational tasks and evolved quickly into one of the most important multipurpose tools. The tasks performed by AoR include course assignment, room reservation, planning and course scheduling, as well as exams and thesis announcements. The first version of AoR was implemented in Rails 3 and Ruby 1.9. During recent years, the project was migrated to Rails 4.2 and Ruby 2.0 and subsequently to Rails 5 and Ruby 2.3 to make use of all new features of the Rails framework.

AoR is designed as a university based internal tool for administration tasks. Therefore, the majority of AoR related terminology comes from the realm of education. The major processes covered by the tool are not limited to one particular university, but are universally known and used. The field of application is for now limited to the Computer Science faculty. The tool supports all computer science degree programs, which are referred internally as course programs. Another commonly used definition is term, which covers summer and winter terms and describes the period of time between breaks where courses are offered.

My work was focused on two AoR modules - the plans and the assignments modules.

Plans Module: There are several timetable visualization techniques used in AoR, each one serving a different purpose: (1) a JavaScript-based editor for timetable creation by administration staff, (2) a JavaScript-based view available for students during the assignment phase, (3) a PDF-based view to print timetables, and finally (4) an HTML-based table for the general overview. Besides the unavoidable redundancy in code, each technology requires a different algorithmic approach.

Assignment Module: The assignments' module handles the course assignments for the students. For each course, students can select whether they want to attend the entire study module, or only lectures, practical courses, tutorials or seminars. Also, the selection is based on a progress regulation, meaning that already completed courses are not offered, and that advanced courses are only offered to students fulfilling specific formal requirements. After the assignment phase is completed, the students can find a link to their personal timetable in PDF, HTML or iCalendar format.

Project walk through

First, I have analysed four different timetable visualization techniques used in AoR: (1) a JavaScript-based editor for timetable creation by administration staff, (2) a JavaScript-based view available for students during the assignment phase, (3) a PDF-based view to print timetables, and finally (4) an HTML-based table for the general overview. Each solution provides a different output and uses a different algorithmic approach.

As the next step - I verified every solution:

The first controversial point in the JavaScript solution lies in its nature. As a stand-alone implementation, it certainly has its justification, but being part of a Rails application, a degree of caution is in order. Without any doubt, the amount of business logic requirements always results in complicated code, but in this case, the capacities of the Rails framework have not been fully exploited.

All in all, the described solution certainly performs its task. Unfortunately, the code is not easy to maintain, due to its complexity and the violation of Rails conventions in the AoR application. This also results in functional redundancy and low scalability.

PDF generated solution follows the typical Rails pattern of modularization and splitting the responsibilities between model, controller and view. Another important part is the outsourcing of time based calculations in a special library called timetable. This library provides important methods to determine the maximal amount of parallel courses per week and the sorting algorithms for the courses. In this case, the developer is able to quickly find out the location of information. The controller, model and library are well-structured and follow proper Rails naming conventions.

The functional part of the assignments module shows an interesting workaround to simulate real-time functionality. This approach proved itself problematic in production environment. The number of unnecessary client requests and demanding database queries result in poor performance and a low degree of end user satisfaction.

I have evaluated the two new technologies used in this thesis, CSS Grid Layout and WebSockets, based on the following criteria: Performance improvements; User Satisfaction; Increased Readability of the Code; Testing; Technology Evaluation and Integration

My experience with CSS Grid Layout was altogether positive. I have discovered only two compatibility issues. To be able to apply the CSS Grid library and ensure testing coverage, one should migrate the application to Rails 5.1 to solve the issues with Sass preprocessor support. The other issue is the PDF rendering. Currently, we are not able to replace the PRAWN-based implementation with a CSS Grid-based one. Also, as the test have shown, the PDF rendering with the Wicked PDF Plug-in takes almost a factor of 1.5 more time than the current PRAWN - based implementation. Apart from this, the CSS Grid library is very suitable for our application needs. As our implementation has shown, we can unify all timetables based mainly on one CSS and one JavaScript file. To simplify the implementation of the view even further, we advise considering moving code from the view to the partial to reduce complexity and redundancy.

ActionCable is a much more complex topic. It is concerned with a backend and integration failures can have more severe consequences. In this case, there is even less literature available. The Google search engine returns 436,000 results when looking for CSS Grid and only 119,000 results for ActionCable. We can rely on an online book by Hartl, which unfortunately is structured as a tutorial only, and on blog posts of DeBenedetto, a web developer and instructor at Flatiron School. They both come from the Rails community and have a more positive view on the topic. Unfortunately, the majority of online information on ActionCable is either just reprints of Rails guidelines or an instruction to build a chat app, based on the example by Hartl. Some articles, however, help to obtain a critical view on the "the highlight of Rails 5"[22], but the majority of authors agree that ActionCable provides an easy interface for both server-side and client-side code. Our experience during the implementation confirms this statement.

All in all, as my research and integrational steps have shown, both the CSS Grid library and ActionCable fulfil the requirements. Both are solid, and even if they are new technologies, they can be successfully integrated in modern web applications.

back