DEV Community: Vesin Dusko

Upgrade to Angular13 and Spring boot 2.6.1

Vesin Dusko — Mon, 06 Dec 2021 12:13:40 +0000

In the last few weeks, we have been busy migrating our product to #angular 13 and #springboot 2.6.1.

I can't share with you our product code, so we also upgrade our TODO and PetClinic apps.

Check it out!

Code owners and review in GitHub

Vesin Dusko — Wed, 10 Nov 2021 11:07:11 +0000

Code review is one of the standards for good code quality and knowledge sharing inside teams. During my carrier, I have seen a lot of different setups, and some of them are better than others.

We are using GithHub PRs as a moment for quality control. It allows us to establish rules when a code from a working branch can be merged with the development branch.

One of the basic rules is code review. All PRs have this type of protection. At least one member of the architect team should give its approval and at least two other developers.

The other gate is that at least one of the code owners of changed files should also do a code review. The concept of code owners is not a well-known functionality of GitHub, but we found it very powerful and valuable.

Details about this functionality you can find on GitHub and examples you can see at todo example.

No alt text provided for this image
The good thing about code owners is that any file or folder in the code can have different owners or GitHub groups, and by it, you can make sure that the right people have done code reviews.

Also, in the case of the larger PRs, the reviewer can adjust the filter to see only files you are responsible for, speeding up the review process.

SpringBoot and Angular PetClinic app

Vesin Dusko — Tue, 09 Nov 2021 07:40:36 +0000

We are continuing with #sharing some of our internal knowledge with you guys. For example, as another test project for our Sifu generator, we specified a PetClinic app. The entire app specification is 470 lines of code ( check for petclinic.sifu file).
It is two Angular clients with a SpringBoot backend.

Check it out and, tell me what you would do differently?

PetClinic repo

Query counter for Hibernate

Vesin Dusko — Mon, 08 Nov 2021 11:59:21 +0000

Hibernate is the most used ORM framework by Java developers, but there are still many misunderstandings about how it works and its best practices.

ORM provides great abstraction between objects and DB, and that is also the problem. Developers tend to forget that queries are expensive and that accessing DB like accessing common objects in memory creates an unpredictable number of DB queries.

One of the ways to prevent it from happening is to monitor queries that a code creates, and it is a tricky thing to do. You can set the level of Hibernate login to log DB calls and track it like that. The problem with that solution is that it is implicit, not part of the code, and you need to do it manually.

A more elegant solution is to create an interceptor (QueryCountInterceptor) and thread-local variable (like AppThread) that will intercept hibernate prepare statements and process them. QueryCountInterceptor is great for code debugging. It is also a learning tool for newcomers into Hibernate. Besides that, it can be integrated with tests. For example, after each tested method, assert the number of queries that have been performed. In this way, you can avoid the situation that a code change unexpectedly changes method performance.

Specification as Code, the full power of #DRY and #model-driven development

Vesin Dusko — Fri, 05 Nov 2021 11:03:01 +0000

We have built our ToDo app (backend, frontend) using code generators and domain-specific language. Now we can analyze the benefits of MDD (model-driven development).

Speed

Writing the entire todo app in todo.sifu took us half an hour, and we got much code generated in 2-3s, 256 files, and 15k lines of code!

Consistency

All the code is 'same,' implemented in the same way with the same coding rules. It is like the same developer wrote it.
Solution #overview - We can see the entire app overview in one file todo.sifu file. We can say that sifu spec is 'documentation as code', which is the essence of DRY. We don't duplicate the knowledge. All the information from sifu spec goes directly into the code.

Every piece of knowledge must have a single, unambiguous, authoritative representation within a system

Maintainability

Reading, updating, and refactoring the app are much more manageable. The impact of every change is much more visible on such a high level. For example, we can see how many APIs will require updating by changing some models or queries.

Modeling

Instead of thinking about the implementation, developers are more focused on the modeling. Our experience is that sometimes we spend hours or days modeling and rewriting the sifu file with multiple iterations before generating code and diving into implementation. We are detecting flaws and fixing them 100x times faster than in the traditional development way.
Best #practices - Because of the code generator, the best practices will be enforced into the code. APIs will be implemented in the same way, all controllers, repositories, models, the security part of the app, web components, routings.

Quality

Thanks to the code generator, many dummy mistakes that can occur during implementation are avoided. Even if the generator has a bug and generates code with a bug, when the generator is fixed, all of them will be fixed by the next regeneration. We are solving problems in one place and distributing solutions into the entire code base. In our case, almost 80% of the application code is generated, and we don't test that code. That gives us great confidence and lets us focus on other things.

Upgrading

For example, these days, Angular 13 is released. To successfully upgrade an app to the new version, developers need to go through a set of steps. Update libraries, use the latest features of the framework, refactor some parts of the code, maybe even change the entire architecture. And repeat the same process for every client that the app has. There is much manual work to be performed to complete this job successfully. In the case of code generators, we need to update the code generator, which is no small amount of work, and then regenerate. All the parts of the code will get the same treatment.

Validation

One of the most significant benefits is the validation of the specification. Because the specification is a code, we can compile it and perform all different types of validations. This benefit is even more potent in the case of enterprise apps. For example, our app has 30k lines of specification code.

To use MDD, you need to invest time and resources into building the toolings, but the benefits are colossal. We at alchemy can develop a codeless platform with millions of lines of code and rewrite it already three times from scratch with the development team of 10-15 members!

In my previous life (the one without MDD and Sifu language and the code generator), for the same achievement, it would take a team of at least 75, and success would be much more uncertain.

ToDo app with Sifu code generator

Vesin Dusko — Thu, 04 Nov 2021 07:56:34 +0000

As part of promoting DRY (don't repeat yourself), MDD (model-driven development), and code generator, I would like to show its full power on a real-life example.

We will implement a simple ToDo app with backend and client app. Let's start.

ToDo project

First we will define the project with basic informations.

todo project[
    url www.todo.com 
    namespace com.todo
    version 1 . 0 . 0 . 0
    environments prod
    developer(duskovesin)
](

Backend

Now we will define the #backendpart of the app.

backend server[
        owners(duskovesin)
        template springboot(tests fabut)        
    ]

We are starting with the definition of User and Todo #models, with a few fields and Todo Status #enums.

        UserRole enum(
            ADMIN
            MEMBER
        )

        Status enum(
            NOT_STARTED
            IN_PROGRESS
            DONE
        )

        User model(
            firstName text[min 1, max 40, searchable]
            lastName text[min 1, max 60]
        )

        Todo model(
            user User
            task text[min 1, max 255]
            date date
            status Status
        )

We also need to specify the type of security that we want to use in the app, in this case, we are using role-based security on top of the User model with #username and #password as security #authentication.

        security(
            principal User
            role UserRole
            type username
        )

Now we can focus on APIs. We will create two sets of #REST APIs.

UserApi

UserApi will have #CRUD API endpoints for manipulation with users in the system, that can be accessed only by ADMIN users, users endpoint to access to all users in the system, and one that Admin can use to check other users Todos.

UserApi api(

            user crud[model User, rest, secured ADMIN]

            users read[
                select from User
                rest
                secured ADMIN
            ]

            userTodos read[
                select from Todo
                     where Todo.user == user
                     orderable by Todo.task
                rest
                secured ADMIN
            ]
        )

TodoApi

TodoApi with CRUD endpoints for users to be able to create ToDo and userTodos endpoint that will be used by any users to access ti his own ToDos.

        TodoApi api(

            todo crud[model Todo, rest]

            todos read[
                select from Todo
                     join User on Todo.user
                response list dto(
                    Todo.id
                    userUsername User.username
                    Todo.task
                    Todo.date
                    Todo.status
                )
                rest
                secured(ADMIN, MEMBER)
            ]
        )

On average, for developers to implement all controllers, APIs, DTOs, models, enums and repositories, db-changelogs and all other parts of sping boot infrastructure code would take at least a few days...

WebApp

Now lets move to the client part of the app.

First, let's define the client app and specify which type of applications it will be generated to. Also, we will define, to which backend it will be connected. Also, we will define the application path and which page is the home page for admin and member users.

webapp client[
        owners(duskovesin)
        connectedTo backend
        template angular
        path /webportal
        home todosPage(ADMIN, MEMBER)
    ]

Now we need to create two pages, one for users to organize their ToDos and the other one for admins to administrate with users.

ToDo page

ToDo page will have a list of user todos, add a button for creating new todo, edit button for opening edit form and delete button for todo deletions. All components will be connected with appropriate API calls which can be seen in the spec.

        todosPage page[
            path /todos
            secured(ADMIN, MEMBER)
        ](
            addTodo button {
                on click open createTodo(none) {
                    on closed do todos.load
                }
            }
            todos table[
                load TodoApi.todos
            ](
                editTodo button {
                    on click open editTodo(item.id)
                }
                deleteTodo button {
                    on click open deleteTodo(item.id)
                }
            )
        )

        createTodo form[
            submit TodoApi.createTodo
        ] {
            on success close
        }

        editTodo form[
            load TodoApi.readTodo
            submit TodoApi.updateTodo
        ] {
            on success close
        }

        deleteTodo form[
            load TodoApi.readTodo
            submit TodoApi.deleteTodo
        ] {
            on success close
        }

Users page

The users page will be organized in the same way, with a small difference that the admin user will be able to access the ToDos of the other users.

        usersPage page[
            path /users
            secured ADMIN
        ](
            addUser button {
                on click open createUser(none) {
                    on closed do users.load
                }
            }
            users table[
                load UserApi.users
            ](
                viewUserTodos button {
                    on click fire ViewTodos(item.id)
                }
                editUser button {
                    on click open editUser(item.id)
                }
                deleteUser button {
                    on click open deleteUser(item.id)
                }
            ) {
                ViewTodos event(id integer)
                external {
                    on ViewTodos do userTodos.reload(event.id, none, none)
                }
            }
            userTodos table[
                input(*, *, *)
                load UserApi.userTodos
            ]
        )

        createUser form[
            submit UserApi.createUser
        ] {
            on success close
        }

        editUser form[
            load UserApi.readUser
            submit UserApi.updateUser
        ] {
            on success close
        }

        deleteUser form[
            load UserApi.readUser
            submit UserApi.deleteUser
        ] {
            on success close
        }

Security page with sign-in form is automatically generated according to the best practices.

The amount of code that's necessary to write to do this basic implementation is:

Language                     files          blank        comment           code
-------------------------------------------------------------------------------
Java                           148           2056             93           9193
TypeScript                      45            660            113           3083
HTML                            19              1              0           1114
XML                             14              0              4            881
JSON                             9              0              0            654
Maven                            3              0              4            246
Sass                            11             44             12            152
YAML                             3              2              0            102
JavaScript                       2              3              4             61
Markdown                         2             13              0             16
-------------------------------------------------------------------------------
SUM:                           256           2779            230          15502
------------------------------------------------------------------------------------

Thanks to code generator sifu we are able to implement it in under 30 minutes...

You can check the code on github