Interactive REST API Documentation with Swagger UI

Bing Liu API Development, Articles, Development Technologies & Tools, Microservices, REST, Spring, Spring Boot 2 Comments

I am assisting a client that is migrating from a monolithic legacy application to a modern Microservice stack with Spring REST. We are helping to implement Swagger UI to provide both a front-end API UI, as well as to provide a level of documentation at the same time. This implementation has simultaneously met our project requirements, as well as garnering some positive feedback from our client!

Swagger UI is one of the most popular tools to visually render beautiful, interactive API documentation. In this blog, I’ll use a REST API application to demonstrate some usage of Swagger UI. The source project is available at https://github.com/bingliu2016/spring-boot-rest-swagger2.

Default image for blog posts - purely decorative

Improving Performance in Enterprise Web Applications

Zach Gardner Articles, Opinion, Programming

Every team that builds a large web application can generally pick from the following: delivering application functionality on time, with high quality, or high performance. Teams can pick one or two of the options, but they can’t pick all three.

Most teams opt to only focus on performance if and when it becomes a problem. This, unfortunately, can be far too late for some projects. Anyone who has been in the industry can empathize with both sides of the equation – choosing to defer performance concerns, as well as seeing the negative impact it can have on the success of the product as a whole.

It is a lesson I’ve learned from hard experience, so I want to make sure others can learn from my mistakes. In this post, I suggest a handful of principles that help to find a happy medium for delivering high-quality software applications while focusing on performance.

Significant improvements can be realized even if only one or two of the principles are applied. Applying all of them, of course, will produce the best results.

The Wonderful Wide World of webpack: Unpacking Awesomeness

Aaron Diffenderfer Articles, Development Technologies & Tools, JavaScript Leave a Comment

In the past couple of years, webpack has come a long way. It continues to rapidly evolve and revolutionize the way we bundle JavaScript and more. For some of us that have been doing development for more than a few years, seeing an amazing tool like webpack and all of its abilities is mind-blowing. If only it had come into existence a bit sooner…

If you’re like me, you may have stumbled across webpack, hearing about its gazillion configuration options, along with a bunch of plugins, numerous ways to optimize your bundle, and more. So much that it all makes your head spin and you begin to feel overwhelmed as you attempt to make sense of it. That’s honestly how my journey began with Webpack.

My first exposure to it…Ejecting the webpack.config.js file from an AngularCLI project just to see what the all the hype was about and to see what I had been missing out on the past few years. After getting past the initial shock of the number of lines of code and the seemingly large structure (how I felt after my first few glances, having to shield my eyes and take a few deep breaths), I started to see many of the benefits. This continued as I read through the webpack documentation, various blogs, and StackOverflow (every developer’s most-accessed site) and as I began trying out a variety of configurations for some actual projects.

As I discovered, webpack can be used with zero config or configured literally in 8,675,309 ways, plus or minus a handful. And there about just as many blogs that cover all of the variations and flavors.

In this post, however, the goal is to highlight some tips & tricks along with features I’ve found to be particularly useful and reasons why you should be using webpack – if you haven’t already started…

Showcase of React + Redux Web Application Development

Jian Li Articles, JavaScript, React, Single-Page Application, Tutorial Leave a Comment

In the last few years, React has continuously gained popularity for the development of web applications. At Keyhole, we have several blogs talking about React and related technologies, including React, Formik, react-router, and many others.

So why would we need Redux? Quite often when we develop applications, we start with small pieces. As the business requirements change, new features/modules/components are added/removed/updated. Particularly in enterprise applications, you may end up with a deep hierarchy of parent-child relationships.

In a React application, parent component-states are passed down to its child component as property. Application states can be changed in many different places. If not managed perfectly (and, in many cases, it’s not), your system can behave differently than expected. It can become increasingly difficult for development, debugging, production support and code maintenance.

In this blog, I’ll talk about Redux and explain how it can benefit React front-end development. I’ll provide an introduction to using Redux with React and show a demonstration of reconstructing an example React application to React + Redux.

I’ll re-construct this React application into two projects. The first project will be the back-end server application which will handle all the typical business in the server end, like registration, authentication, database operation, etc. I’ll use MongoDB to persistent data and Node.js for REST API development. You can also reference RESTful API development to the Github repository open source khs-convo, released by Keyhole Software.

The second project will be pure front-end development, which will React with Redux for state management. React with Redux integration is the focus of this blog…

An Example Progressive Web App on Android

RJ Dela-Cruz Angular, Articles, Development Technologies & Tools, JavaScript, Mobile 6 Comments

In my experience, the best way to learn a new technology is to create something tangible with it. I recently sought out to learn Angular and Angular Material. So, I developed an experimental Angular app that uses omdbapi to query Movie Posters. It’s aptly named Movie Poster Finder.

Developing the Movie Poster Finder application, I ran into a thing called PWA, which is also known as Progressive Web Applications. I thought it was really neat that both Android and mobile Chrome treat them as native applications.

In this post, I will show an example Progressive Web Application in action, explaining what I encountered when turning an experimental Angular web application into a PWA.