Skip to main content

From JSP to AngularJS

Our team maintained a project that was used a quite old web technology JSP. Our project likes a web portal that can contain some other smaller projects, I called it a module. Now, our customers want to add a new module into it.

We met a problem is the current projects can't be testable and hard to maintain because both the logic and GUI are mixed together by using JSP and JSTL. It was really a messy project structure. Therefore, we didn't want to continue this approach. Testing is very important, as well as a good structure for maintenance. We would like to apply MVC pattern for testable and maintainable ability purpose. Yeah, that was actually time for changes.

Our project structure can't be testable and has poor structure.


We listed out some options:
  1. Refactoring all current modules -- terrible approach, too much efforts, too risky due to a lot of modules.
  2. Using MVC just for the new modules with Servlet for Controller, Java class for Model and JSP for View -- actually, it was impossible for us also because our back-end technology was covered by Axon.ivy, the Servlets were fixed and we didn't want to modify a lot without Axon.ivy's official ways.
  3. Finding a new front-end frameworks that can work with Axon.ivy and apply MVC also -- it seems a best solution, we just should learn a lot by choosing this approach.
We found AngularJS is one of the best choices in that time. we did a quick research and we found AngularJS can help us using MVC. Moreover, we can test with Javascript by using some Javascript test framework, likes Jasmine. We also can setup a Jenkins job for auto-run tests by using Karma.

We used AngularJS and some related technologies to overcome our problems.

That was cool and we decided to go for it.

Comments

Popular posts from this blog

Styling Sort Icons Using Font Awesome for Primefaces' Data Table

So far, Primefaces has used image sprites for displaying the sort icons. This leads to a problem if we want to make a different style for these icons; for example, I would make the icon "arrow up" more blurry at the first time the table loading because I want to highlight the icon "arrow down". I found a way that I can replace these icons with Font Awesome icons. We will use "CSS Pseudo-classes" to achieve it. The hardest thing here is that we should handle displaying icons in different cases. There is a case both "arrow up" and "arrow down" showing and other case is only one of these icons is shown. .ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s { background-image: none; margin-left: 5px; font-size: 1.1666em; position: relative; } .ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s:not(.ui-icon-triangle-1-s)::before { content: "\f106"; font-family: "FontAwesome"; position: ...

Java Core - Top 10 Questions Every Developer Should Know

#RandomlyPickedByMe What is the difference between Javascript and Java? Difference between StringBuilder and StringBuffer? Why do I get "SomeType@a3fde" when I print my code? Why is String immutable? Why "equals" method when we have "==" operator? Is List<Dog> a subclass of List<Animal>? Why shouldn't we use raw type? Is Java “pass-by-reference” or “pass-by-value”? What's the advantage of a Java enum versus a class with public static final fields? Why "double x = 0.1 + 0.2" and result of print(x) is 0.30000000000000004? 1. What is the difference between Javascript and Java? Holy crap! (Vietnamese: Thế quái nào lại có câu hỏi ngớ ngẩn vậy chứ?) "Java and Javascript are similar like Car and Carpet are similar." - Greg Hewgill (on StackOverflow) 2. Difference between StringBuilder and StringBuffer String is immutable. StringBuilder and StringBuffer are mutable. StringBuffer is thread-safe. String...

BIRT - Fix the size of an image

I use a dynamic image as a logo my report in pdf. At the beginning, I use table to align the logo in left or right. I meet a problem with some images with a large width or height. My customer requires that the logo should be displayed in original size. These following steps solves my problem: 1. Use Grid instead of Table 2. Set Grid "Height" is 100%  and "Width" is blank 3. Set "Fit to container" for images are "true". Download the the template here .

Why Functional Programming Matter

What issues do we concern when implementing and maintaining systems? One of the most concern is debugging during maintenance: "this code crashed because it observed some unexpected value." Then, it turns out that the ideas of  no side effects  and  immutability , which functional programming promotes, can help. Shared mutable data is the root cause Shared mutable data are read and updated by more than one of the methods. Share mutable data structures make it harder to track changes in different parts of your program. An immutable object is an object that can't change its state after it's instantiated so it can't be affected by the actions of a function. It would be a dream to maintain because we wouldn't have any bad surprises about some object somewhere that unexpectedly modifies a data structure. A new thinking: Declarative programming There are two ways thinking about implementing a system by writing a program. - Imperative programming: has...

Regex - Check a text without special characters but German, French

Special characters such as square brackets ([ ]) can cause an exception " java.util.regex.PatternSyntaxException " or something like this if we don't handle them correctly. I had met this issue. In my case, my customers want our application should allow some characters in German and French even not allow some special characters. The solution is that we limit the allowed characters by showing the validation message on GUI. For an instance, the message looks like the following: "This field can't contain any special characters; only letters, numbers, underscores (_), spaces and single quotes (') are allowed." I used Regular Expression to check it. For entering Germany and French, I actually don't have this type of keyboard, so I referred these sites: * German characters: http://german.typeit.org/ * French characters: http://french.typeit.org/ Here is my code: package vn.nvanhuong.practice; import java.util.regex.Matcher; import java.util...