CGCSoftware

Apr 1 2023

Contractor Chronicles 4

This week I’ve spent working on a very tricky bug, not one that required a complex rewrite to solve, but instead one that was hard to find the cause of.
It was on a Angular app that uses a third party system to generate forms for the application. The issue was that where this third party system had been updated it required a change to one of the forms in the application.

It was tricky to solve due to the fact that it needed a lot of comparing files and lines and lines of JSON to find the issue. Thankfully another developer helped me see the issue and I had been looking at it for hours.

It does go to show that it is always a good idea to get a ‘second pair of eyes’ to look at an issue. There’s no shame in asking for help in the end it helps get the problem solved and the work can continue.

The current contract I have should be ending at the end of April, so I’m going to start looking for the next one soon. Changing contracts is always a interesting time, mainly it’s stressful looking for the next role, but it is also a time to think about maybe trying something different.

If I look around on the job boards and LinkedIn it looks like React is the main choice for building web apps. So when this contract is up it might be time to look at getting into React development.
Having said that, Angular is going through a bit of a change. It now has stand alone components, like React and Vue. It has a new system called Signal coming in the next version, which is a new way of adding Reactivity to your application. These two changes alone mean that Angular apps can soon be written using the same approach as React and Vue, but still have all that Angular provides a complete framework with many of the tools you need for an application (like built in testing, routing, an http client and the CLI).

So is it worth looking at React when Angular could be having a resurgence? I’m not sure. I think at the end this contract I’ll spend a few days building a React app to see what it’s like to work with.

Stephen Adams 0 Comments

TypeScript Web Development

Mar 31 2023

Business Benefits of TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds optional static typing to JavaScript, classes, interfaces, and other advanced features.

TypeScript has a number of benefits for businesses, including:

Increased productivity: TypeScript can help developers to write code more quickly and efficiently. This is because the compiler can help to identify errors early, and the IDE can provide auto-completion and other features that can help developers to write code faster.
Reduced costs: TypeScript can help to reduce costs by making it easier to refactor code. Refactoring is the process of changing the structure of code without changing its behaviour. With TypeScript, developers can refactor code with confidence, knowing that the compiler will help to ensure that the changes do not break the application.
Improved quality: TypeScript can help to improve the quality of software by making it easier to write unit tests. Unit tests are automated tests that can help developers to identify defects early in the development process.
Increased maintainability: TypeScript can help to increase maintainability by making code more readable and understandable. This is because the compiler can help to identify errors, and the IDE can provide auto-completion and other features that can help developers to write code more clearly.
Improved security: TypeScript can help to improve security by making it easier to write type-safe code. Type-safe code is code that is less likely to contain vulnerabilities.

How to Get Started with TypeScript

If you are interested in getting started with TypeScript, there are a few things you can do:

Learn the basics of TypeScript: There are a number of resources available online and in books that can teach you the basics of TypeScript.
Choose a TypeScript IDE: There are a number of TypeScript IDEs available, such as Visual Studio Code and IntelliJ IDEA. These IDEs can help you to write and run TypeScript code.
Find a TypeScript community: There are a number of TypeScript communities available online, such as the TypeScript subreddit and the TypeScript Discord server. These communities can help you to get help and support when you are using TypeScript.

Conclusion

TypeScript is a powerful tool that can help you to improve the quality, reduce costs, and increase the maintainability of your software development projects. If you are interested in getting started with TypeScript, there are a number of resources available to help you.

Stephen Adams 0 Comments

Mar 27 2023

Contractor Chronicles 3

This week was spent working on the maintenance of an existing Angular application, which has been recently updated to Angular 15.

The upgrade was fairly easy, Angular and the Angular CLI make upgrading between versions so easy. It was something I missed when working with Vue. I know that the Vue CLI does have a way of upgrading, but with the Angular CLI being a bit more mature I find the upgrade process far more straightforward.

I also spent a bit of time watching a live Twitch stream of Josh Goldberg (he’s a full-time open-source developer, who specialises in Typescript), in this stream he was reviewing a pull request to a Typescript project Typescript-ESLint, which is a library for adding linting for Typescript to ESLint.

Linting is a way of checking for bad practices in your code, it is a set of rules for JavaScript. This Typescript-ESLint project adds rules for Typescript to ESLint.

As I mentioned in earlier Contractor Chronicles I said I was looking for an open-source Typescript project to get involved in and I started to look more and more into this Typescript ESLint project and get involved in the project.

So this week I spent a bit more time looking at this project and after watching the Twitch Stream of Josh’s I’m starting to understand how the project works and hopefully soon I can start contributing to the project.

Finally, I spent some time going through a plan for the rest of the year, breaking down some goals I have for the years into projects. Then using the PARA method to organise these projects and goals.

Stephen Adams 0 Comments

Mar 23 2023

Why Use TypeScript?

TypeScript is a free and open-source programming language that was developed by Microsoft. It is a superset of JavaScript that enables developers to write cleaner and more maintainable code. In this blog post, we will discuss why it is beneficial to use TypeScript in your next project.

Improved Code Quality

One of the main advantages of TypeScript is that it provides a type system that enables you to catch errors and improve your code quality. By defining types for your variables, functions, and classes, you can catch errors during development time rather than runtime. This helps you to avoid common bugs, such as null or undefined errors and improves the overall reliability of your code.

Better Tooling

Another benefit of TypeScript is that it provides better tooling support than JavaScript. TypeScript has a rich set of features that enable you to write code faster and with fewer errors. For example, TypeScript provides code completion, which helps you to write code faster and with fewer errors. It also provides better error messages, which helps you to debug your code more easily.

Improved Maintainability

TypeScript makes it easier to maintain code over time. By providing a type system and better tooling support, TypeScript enables developers to write code that is easier to maintain and refactor. This is especially important when working on large projects with many developers. TypeScript’s type system enables developers to understand the codebase better and helps them to make changes more confidently.

In conclusion, TypeScript is a powerful programming language that provides many benefits over JavaScript. It offers improved code quality, better tooling support, and improved maintainability. If you are starting a new project or considering a migration, TypeScript is a great choice that will pay dividends in the long run.

Stephen Adams 0 Comments

Mar 17 2023

Contractor Chronicles 2

This week, carried on with existing client work. Fixing bugs on a complex Angular application that has been worked on by a number of others developers over the years. So it’s always interesting to take something written by someone else, work out how it works and then fix issues without making more bugs. This is a whole topic on its own, which I might write about

Also spent time looking into TypeScript libraries with the aim to work on some open-source development as a way to improve my TypeScript. I’ve been looking at TypeScript-ESlint, the linting library for TypeScript, a great project run by Josh Goldberg Its aim is to add support for ESLint to your TypeScript code. It will check your code for issues and bad practices and warn you of these issues.

Another thing that happen was there was a new budget in the UK, nothing really helpful for small business owners like myself just more ways of taxing people and trying to encourage people who have retired back to work (if I had retired and was playing golf every day I don’t think I’d be keen to go back to work).

The plan for next week is, to continue exploring open-source TypeScript development, working on client work and preparing for the next tax year.

Stephen Adams 0 Comments

Feb 14 2023

The Anatomy of a Great Typescript Book

If I was to write a TypeScript book, I would aim it at web developers who have started using TS, but come from a JavaScript background and have now been put on a TS-based project.

I wouldn’t aim at a certain web framework like React, or Angular, but how a web developer can start to use all the more advanced features in TypeScript so they can write good, type-safe code for their application, no matter the framework they are using.

In this ‘book,’ I will cover briefly what TypeScript is and its aim. I think it is clear now what TypeScript is and what its original aim was, but if someone is coming to this ‘book’ without knowing anything about TS then a brief introduction is needed. Try to explain to someone who’d be asked or just started using TypeScript why it’s so good and why they should be using it over JavaScript.

I’d then move on to introduce Types, and the primitive types that you have in TS (string, number, boolean) then move on to how to define your Types and the various ways you can do this. How you can create Types from other Types, how to use the utility Types and build up the Types for your project. All the time I try to keep it framework agnostic but relate it to a web developer who is now working on a TS-based project for the first time. So they can see that there are primitive Types, but they aren’t all you have (not everything needs to be a string). How you can start to build your Types that are more descriptive and applicable to your application.

Then I’d start looking at classes and modules and how they can be used along with Types to create a common library that you can use within the components of the framework you are using whether it’s Angular, Vue or React. Building this library of domain-specific Types that describe the data of your application and how you can use classes and modules to structure this library.

After introducing this concept of building a library for your application, which is more domain-specific and provides the business logic your UI components need. I’d move on to using Generics and how they can improve the re-usability of this business logic library.

I found Generics in TypeScript a complex topic to understand, especially if you’ve come from something like JavaScript. They are a powerful concept to understand and to start making use of, when you do it takes the re-usability of your code to another level. I feel that as a web developer who has used a couple of UI frameworks, concepts like Generics and Type manipulation are features I know about but haven’t used much in my applications because so much is handled by the framework. If I learnt more about these advanced concepts of TypeScript they’d improve my code so much.

I would then start to finish the book by looking at the compiler, how it works, and how to make use of the TSConfig settings and compiler. Again through using UI frameworks a lot of the TS compiler settings are set up as part of the framework CLI tooling. Knowing more about this area can lead to more efficient code.

After all that I’d spend a little time looking at the various TypeScript libraries that are available which can be used along with the framework to improve Type safety and maintainability within an application. Libraries like ZOD and tRPC, for example.

Finally, I would then take this concept of learning to build an internal library of business logic for an application and go through how external libraries can be built that can be used to share business logic across multiple applications. If you are a web developer who works for an organisation who have more than an internal application that uses TypeScript and how using features like classes, modules and Generics a Type safe domain-based library can be built and used across all these applications.

I think the aim of this ‘book’ would be to show that, yes TypeScript is used by all the main web frameworks, but there is more to it than just writing the code behind your framework’s components. We learn a lot about frameworks but not so much about the language behind it

Stephen Adams 0 Comments

Feb 6 2023

Thinking in TypeScript

Throughout all my time with Angular and Vue, the one constant through both frameworks is TypeScript.

Generally, I always thought I knew TypeScript, but over the last couple of months, it’s clear that there is far more to TypeScript and what you can do with TypeScript than I knew.
After watching more and more videos on TypeScript I see that there is so much more I need and want to know about TS. So I’m starting to really study TS, to get to know it and make sure I’m using the advanced features of TS.

My plan for learning advanced TypeScript is:

Watch all the Matt Pocock Advanced TypeScript videos
Read through Programming TypeScript by Boris Cherry
Read Effective TypeScript by Dan Vanderkam
Read TypeScript 4 Design Patterns and Best Practices by Theo Despooudis

My aim is to learn the more advanced features of TS so when I have a new feature to add (using either Angular or Vue) or a bug to fix I start to think about the more advanced features of TypeScript e.g. Generics, Types, patterns etc, to how I approach this new feature or bug.

Stephen Adams 0 Comments

Feb 2 2023

Dealing With CommonJS based dependencies

An Angular quick tip I discovered today was if you have an application with many third-party libraries that use CommonJS instead of ES modules. You can add the names of these libraries to the "allowedCommonJsDependencies" option in the builder settings in Angular.json.
This helps remove all the warnings in your build, it is basically telling Angular that these libraries are ok to use CommonJS for now until they are updated.

This is great if you are updating an Angular app, but don’t want to go through and update all the dependencies that are still using the CommonJS approach. Then over time as you update these libraries they can be removed from the "allowedCommonJsDependencies" array.

Here’s a link to the official Angular docs on this – https://angular.io/guide/build#configuring-commonjs-dependencies

Stephen Adams 0 Comments

Jan 31 2023

Using third party libraries are useful as long as they are maintained

There’s no denying that the open-source movement has helped move web development forward. Before open source was so prevalent on the web everything had to be built from scratch, there was no searching on NPM for a library that could help fix an issue you had or a framework to structure your application.
But one of the downsides I see with using third-party libraries in your application is if this library is no longer maintained or updated and your work relies heavily on this library it can easily become a maintenance nightmare.

I’ve worked on a few Angular apps now and many are using third-party libraries every time a new version of Angular is released I have to check if these libraries work with the latest version, which on the whole they do. But if one of these libraries is no longer maintained or worked on, then you are stuck with the choice of either not upgrading your Angular version (something I don’t recommend) or refactoring your code to remove this dependency (something I do recommend).

So when it comes to adding third-party libraries to our codebase we need to make a few decisions. First, is it regularly maintained? Checking the history of the library on GitHub can answer that. If there have been no updates within the last year I get worried. Second, if it is maintained how crucial is this library going to be in my application? If it’s core to how the app works how would I maintain the app if later this library is no longer updated? Will it break my application? Can I easily refactor my code to remove this dependency if I need to? These are all questions that need to be considered before just adding a library.

One tip I have used is if you are using a third-party library or component in your application to wrap it within your own library or component then use this ‘wrapper’ throughout your codebase. So if you need to remove the outdated component/library all you need to do is refactor your ‘wrapper’ to either use another third-party library/component or your own version.

Open source is fantastic, it provides so much but I think that in large-scale applications we need to be defensive in how we use open-source code. Third-party libraries are created by some excellent and hardworking developers, many of whom do this work on top of their own, so I think we should be thankful for their work, but just be aware of how much we are using these libraries.

Stephen Adams 0 Comments

Jan 29 2023

Back in the Angular World

After a year-long contract with Vue, I’m just starting a new contract working with Angular again.
It’s strange coming back to Angular from Vue, the Angular eco-system is far more mature than Vue. Angular is more of a platform than Vue, so when you start working with Angular, you find that the framework provides you with a lot more ‘out of the box’ than Vue does.
Does this mean that Angular is ‘better’ than Vue? Well no, they offer different things. Angular is ideal for larger-scale applications and teams, while Vue is great for applications that might not need an entire platform to get started.

Stephen Adams 0 Comments

Articles

How to Get Started with TypeScript

Conclusion