In this post I’ll cover the approach I’ve used to make an easily deployable, configurable front end for a single page app (SPA) in a quasi-microservices deployment. It represents the extract the UI step as outlined in Christian Posta’s post. Monolith to Micro-services I use the following spectrum of monolith to micro-services: Stage Description Advantages Constraints Fully monolithic The UI and backend services are packaged and deployed together, and the UI is rendered server-side. Easy to coordinate deployments Hard to work on in parallel Bundled SPA The UI is an SPA, and talks to the backend by an API, but is packaged with the backend during the build process UX improvements due to application like interactions Duplicated code to validate at the frontend and backend. More complex interactions between the frontend and backend Packaged SPA Same as Bundled SPA, except the frontend produces its own build artifact that is included in the application (think webjar, or NPM package) UI developers do not need to know how to build the backend server. Able to have a dev API server As per Bundled SPA Independent Frontend The UI is packaged and deployed separately to the backend Easily have different release cadences for the frontend and backend. Able to have multiple different frontends for different customers, tests, etc More coordination needed between the frontend and backend deployment (e.g., API versions, connection holding, etc) There is no right position on this spectrum. It is highly dependent on the business requirements (development cadence), existing technologies, staff capabilities, etc. ...

What follows is an explanation of how to resolve an issue that you may hit with Angular if you are using services from modules. In my application I use the pattern of having a service that can be used to display modals, so that other components can show a modal using a method call, and not have to worry about the specifics of the modal implementation. As a mock example, suppose you have a feature module, that has a component, a modal, and a modal service: ...

Out of the box the support for Angular under Storybook is great. However, depending on how customised your setup is, you’ll probably need to harmonise your Angular setup with your Storybook setup. Typescript Paths Because we have customised tsconfig.json roots in order to clean up our import paths, we first need to make sure that Storybook’s Webpack uses the the TsconfigPathsPlugin. const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); module.exports = async ({ config, mode }) => { config.resolve.plugins = [new TsconfigPathsPlugin({})]; return config }; MapBox and Node core libraries Because we use MapBox we get the following error ...

Securing any infrastructure means, amongst other things, protecting machines from unnecessary exposure, and restricting remote administration access. While having an SSH port open to the world is sometimes a necessary evil, a preferable approach is to restrict access, via a firewall or security group, to a smaller, more controlled network. If you always administer your systems from a single location - home, office, etc - it is practical to simply whitelist those IP addresses. However, if you are ever working remotely it’ll become necessary to either manually add your current IP address, or use a VPN. ...

In the Java world, one of the options you have for generating PDFs is Flying Saucer. It is quite a nice solution that renders HTML to, amongst other things, PDF. In its simplest form a report, receipt, etc, could just be a chunk of text. But, more realistic situations would require images to be embedded in the output, be these logos, charts, images, etc. A commonly found suggestion for achieving this is to link to the assets via the file-system. This actually occurs by default if you set the base URL of the document to null: ...

A benefit of a strong type system is the ability to have good guard rails that tell you when you’ve writing an invalid program, without having to run it. However, to be truly useful it needs to be possible and ideally easy to define interfaces and method signatures once, and simply transform these for their various applications. In react/redux applications you define actions, and these are dispatched to mutate state or trigger side effects. I’m just using this as a way of introducing the TypeScript example, rather than suggesting what follows is a good way of solving this problem (e.g., libraries like Typesafe Actions exists to solve this problem specifically). ...

As mentioned here if you use of from rxjs to implement mock services you can get some unexpected results. In my case, my code always cleans up its subscriptions. But, by default, of executes synchronously, so the following code will fail because sub isn’t set when the closure is called. import { of } from 'rxjs'; const mockService = { get() { return of([]); } } const sub = mockService.get() .subscribe(result => { this.list = result; sub.unsubscribe(); }); In order to get this code to behave like a the real service we need to use a scheduler. ...

I’ve recently been involved in upgrading a AngularJS + UI-Bootstrap + UI Router project to Angular 7 + ngx-bootstrap + UI Router. The reason for the upgrade was that the support for a lot of the other components was fading, and the availability of new components was far better for Angular 7 than AngularJS. Having said that, AngularJS is still going strong for better or worse. The approach was to use the Angular Upgrade module which allowed a component-by-component upgrade, and basically seamless interop between the two versions. This was helped a lot by the use of UI Router which navigates to both AngularJS and Angular 7 container components. ...

Starting with a project using Spring Boot 1.5.8 and Hibernate 5.2.12 I implemented Liquibase to handle database schema changes. This is all straight forward enough, with plenty of other tutorials of how to setup the runtime side. The schema diff generation side was another matter. The issues hit was that the identifier names were not correct - Spring Boot would produce underscore versions of names, e.g., my_table, while Liquibase would produce names as per the class or field name, e.g., MyTable. To get around this I could specify the actual table or column names in the @Table or @Column annotations. However, this was not going to work when we put Envers into the mix. ...

The following Groovy PostBuild script can be used to send build notification to Telegram via a Telegram bot account. Note, that this is just using the HTTP POST API, meaning that you can’t interact with Jenkins via Telegram. The message will include Jacoco coverage information if the build script is placed after the Jacoco post build reporting. Use the following, dropping in the appropriate values in the first few lines: ...