Kontena Cloud’s Modern Front-End Stack
A couple of weeks ago we announced the release of Kontena Cloud — the premier DevOps tool for monitoring, analyzing and operating container workloads. It’s now time to slightly reveal our front-end point of view and to show what technology stack we used, how it’s all working and organized, helping everybody to be productive, release fast and prepare apps for scaling.
New technologies allow us to keep our focus on what’s really important — on the product itself, not caring about the little things. Anyway, today we have very powerful tools that just work right out of the box.
Front-end choice
Short development time, quality and performance are essential criteria that guided us when choosing technologies for the Kontena Dashboard. We needed to create a modern, good-looking and smooth-experience tool that will make developers happy, as the great Kontena slogan says. It also must be performant.
After some preparations we’ve selected this developer stack:
- React & Redux
- Typescript
- Webpack
- SCSS & Flexbox for app layout
Some words about each technologies and our personal feelings regarding them.
React
Simplicity, modularity and a one-way data flow allows us to produce our web app very fast, then scale it really easily to any complexity and size.
As you write code using React, the whole app becomes more predictable and clear, you always see how your components work — thanks to the explicit props flow (except callback answers).
And with React you don’t have specific limitations — it’s still good old JavaScript.
Also, if you using it, your app will be optimized right from the start, as Dan Abramov mentioned
Oh, and no, React is not faster than DOM. Sorry.
But it lets you build large performant apps without thinking too much about performance.
Personally, we have past experience with Angular 1.x and for now I should say I am much happier with React. Even if it covers only the “view” part of your app and cannot be named as the “framework”, it does it’s job in a very good, predictable way.
I like the idea that React extends JS instead of HTML (as does Angular or Vue).
When you use JSX all that you need to know is JavaScript, for example how to iterate through a list of items and render some template for each one.
In addition I can recommend useful React documentation, many online courses (if somebody needs them), the huge community and confidence about the future of that piece of technology. React surely will drive the web for years ahead.
Redux
Every app’s state has to be managed somehow and here’s where Redux comes to the rescue! Like somebody said:
If you don’t use Redux for your app, you have to write Redux by yourself.
It allows you to manage big app states by separating concerns and it’s complexity won’t grow even if you have a pretty large application.
Here is an example of data we store in Redux state:
As soon as vital data is located in Store it can easy be connected to React components with official bindings. Components will always respond to store changes and the call render method when data is updated.
@connect(store => ({
features: store.organizations.features,
organizations: store.organizations,
news: store.news,
nodes: store.nodes.list
}));
export class Home extends React.Component<Props, State> {
…
}Definitely, Redux nowadays is the best choice for flux-architecture in the React world. I highly recommend it!
Typescript
At first when I started to work with typescript I thought it was a bad idea and it created more problems than it solves, as well as the overall coding speed being slower. But I was wrong.
It usually happens when you don’t know all the details about the tool you’re starting to work with.
TypeScript is not only about types. It makes you a better developer and helps you understand your code better in the long term.
What I can tell after using this ‘lovely piece of technology’ for a year:
- It forces you to think more about architecture/design and helps you catch a lot of errors not only at the code compilation step.
- Interfaces/types will create a “glue” for your app where you can see all dependencies and relationships much easier, even if you come back to your code after a long period of time.
- It documents your app much better than JSDoc or something similar.
- It supports the latest ES6 features out of the box and you can forget about BabelJS altogether.
SCSS & Flexbox
It’s not a secret that CSS preprocessors are used by a large amount of web developers. Statistics agree with us. In the case of our project, SCSS makes our component styling faster than ever before.
All scss files are located near their components in separate folders so it’s easy to maintain and search for files you need.
Mostly we use the power of the preprocessor with variables and mixins. For example, all web app colors sitting in one place.
And here’s how we prepare selectors for different icon versions in a selectable box:
@mixin icons-generate($path) {
@each $plan in (free, starter, pro, unlimited) {
&.#{$plan} { background-image: url(‘#{$path}/#{$plan}.svg’) }
&.#{$plan}.current { background-image: url(‘#{$path}/#{$plan}- selected.svg’) }
}
}Meanwhile, Flexbox was our choice for app layout design. Of course it’s not a shiny CSS Grid Layout, but it’s stable, has great browser support and easily can solve old layout problems.
For clearer styling of components used in the layout, we work with the flex.box npm package that allows us to write class names in the same way as flex properties:
<div className=”GridAuditList flex column box grow”>
<div className=”grid-list-table flex column box grow”>
…
</div>
</div>This approach lets us determine element behavior with just one glance.
Summary
Obviously, from a wide range of tools, you can take what suits your project best and what you personally like. And we hope that our small overview of the Kontena Front-end workflow will make your decision more mindful and clearer.
For us, our chosen cohesive system allows us to work at a high pace, minimize release time, improve the Kontena Cloud Dashboard and as a result make developers happy!
About Kontena
Want to learn about real life use cases of Kontena, case studies, best practices, tips & tricks? Need some help with your project? Want to contribute to a project or help other people?
Join Kontena Forum to discuss more about the Kontena Platform, chat with other happy developers on our Slack discussion channel or meet people in person at one of our Meetup groups located all around the world. Check Kontena Community for more details.
