Tools are important to anybody that is a master crafter. Good tools makes beginner programmers understand better what is going on, and makes seasoned developers fast and precise.
Here are 6 tools that I use daily at work:
1. VSCode
This popular editor works really well for me. Before the switch to VSCode I've been using tmux and vim for a good 4 years. That was a good setup especially back when I was a fullstack developer and had to do work in the server, tmux was god-sent for all those server tasks. ES6 linting eventually slowed down so bad that I had to change to a modern editor.
With some extensions and configuration, the transition to VSCode was quite seamless. Here are the ones installed on mine.
- angular2-inline
This gives you syntax highlighting for inline HTML and CSS in the component header, instead of in a separate file. - Angular Language Service
The missing intellisense extension that shows up your available variables and function from your component typescript file in the template file. - Angular v7 Snippets
Quick shortcut keys for boilerplate code based on best practices by John Papa. - TSLint
Microsoft's linter to notify developers when there is mistakes in their code. Helps reduce bugs even before the web app is on the browser. - Whitespace
Simple extension that just strips any whitespaces from the end of the line when you save your file. Stops TSLint from complaining, and any potential compiling issues in the future. - Path Intellisense
I really like this extension too, it saves me time from writing out the whole path when importing code from other files. It scans and automatically fills the import path on the top for whatever class or service you're trying to bring into the component. - Vim
The core IDE setup I rely on for my everyday development. I always feel handicapped whenever I use other non-vim developer's laptop. The vim extension works well if you're used to vanilla vim commands. It allows custom mapping to a certain degree, but not everything works unfortunately. - GitLens
Who doesn't wantgit blameturned on every time you hover over a line of code?
I'll make a tutorial about my VSCode configuration soon.
2. Compodoc
Documentation is usually an afterthought. Developer code away in the flow, often forgetting their train of thought the next day. It gets harder and harder everyday. Once the software architecture becomes large enough, it becomes difficult to maintain the spacial imagination of how everything fits together.
Compodoc is made specifically for Angular projects. And it's really good at it. Out of the box, Compodoc generates a clear overview about your project. Each module and routes are shown clearly in diagrams.
It supports JSDoc type annotation as well, so it could be extended to have more descriptive comments on the page, as well as whatever it can gather from Typescript compiler.
The only down side is that it's only for Angular, or Ionic. It won't work on other Typescript projects.
3. Angular CLI
This is probably really basic. If you're not using this already, you have to get it immediately.
Angular CLI is the Angular team's helper terminal tool to help you kick start your project. It comes with several important commands like ng generate component, ng new, ng build.
ng new creates a folder structure and configuration for your Angular project based on best practices.
ng generate component creates components for your app, and automatically import it into your module.
4. Angular Material
It might be a little boring to see another Google based design in the app, but it's popular for a good reason. Angular material works seamlessly with Angular, giving you easy customizable components to construct your app.
The library adheres to Google's material design guidelines. The latest version has split the components into different modules so you only have to import the ones you're using - saving space in the production build.
Once the app is almost done, you can customize your look with other colors and border radius. Many UI style guides out there, such as Alibaba's Ant Design and IBM's Carbon Design are very similar to Material design, and thus is not too difficult to modify to fit the new styles.
5. Angular Flex-Layout
This extension of Angular material is pulled out and made into its own module. Angular Flex Layout gives you the power to position your elements with ease.
The documentation is relatively easy to use, given you already know flex-box CSS.
6. ngx-translate
If you work outside US, you'll definitely need some kind of bilingual website. A website with native language as an option will always be more comfortable for the users. I use ngx-translate in every project I work on.
"But we already have Angular's i18n library, why do we need this?" I hear you ask.
Unfortunately the i18n library can only work in 1 language, so it has to startup again if you want another language.
Until probably Angular 9, ngx-translate will still be the best bet for live switching of language.
Bonus Tools I Absolutely Love
7. Ionic
I've been using Ionic framework from Angular 1.5 until now. They have consistently given me the best experience of developing a cross-platform app.
Ionic is a set of library created on top of Angular that makes developing with cordova a breeze. Since it's Angular based, it feels familiar to develop. Especially Ionic Native plugins that you gives you access to native phone functionalities without learning Java or work with Android SDK.
The material style components that come with it are high quality, and built with mobile-first in mind. Paired with Ionic Creator it can even setup your wireframe app without writing any code.
The downside of Ionic in my opinion is the theming and variable. For small applications it is a great extension to be able to access variables on any component. But if the app and variable list expands, the generated CSS gets exponentially large because it has to generate a color for each and every version of their components so that you can use color="positive" in your HTML.
8. Firebase
Firebase started off as a hot startup that helps mobile developers get on their feet fast. It comes with Google Analytics, a reliable live database, user authentication, push notifications, hosting.
It was acquired by Google in 2014, which extended the core features to include Cloud Functions, Machine Learning kit, a scalable database, and the support of Google's tech team.
For small apps with small user base, Firebase is free to use within very generous quotas. We at Goodhum has recommended and implemented many apps hosted in Firebase. The experience has been really good.
Especially for startups that do not have the funds for a dedicated backend developer, choosing a platform that has backend-as-a-service is the smarter thing to do. Firebase works well within the Google Cloud Platform's technology, so it's easy to migrate it to Google App Engine when the app has matured.
Conclusions
These are some of the tools I use consistently to provide world class software to clients.
What are some of the tools you use? Is there something out there that has changed the way you work for the better?
References
[1] https://github.com/angular/angular/issues/16477
[2] https://github.com/ngx-translate/core/issues/495
[3] https://cli.angular.io/
[4] https://material.angular.io/
[5] https://material.io/design/
[6] https://compodoc.github.io/compodoc-demo-todomvc-angular/additional-documentation/actions/creation-of-a-todo.html
[7] https://github.com/tmux/tmux/wiki
[8] https://github.com/angular/flex-layout/wiki/API-Documentation
[9] https://ionicframework.com/docs/native/
[10] https://ionicframework.com/docs/cli/commands/cordova-platform
[11] https://ionicframework.com/creator
[12] https://firebase.google.com/products/
[13] https://firebase.googleblog.com/2014/10/firebase-is-joining-google.html
[14] https://en.wikipedia.org/wiki/Firebase
[15] https://firebase.google.com/pricing/