Turning Design into Angular Components

Recently I had to take a design and create the Angular components for this design, while working through this problem it made me think about the thought process of how as Angular developers we turn designs into working applications.

When I first looked at the design, it’s a very simple layout of a page, which has a simple form, and a few controls at the bottom of the page. The first thing I thought of was how I would divide up the sections of the page into separate components. I’d create one component for the main page, one for the form, one for the controls at the bottom of the form, then off I went creating components using the CLI.

What I really should have done is looked at the page as a whole, how it works within the application and asked myself some questions before diving into building components.

The types of questions to ask before include:

  • What is the purpose of the page, what does it do?
  • What are the inputs and outputs of the page?
  • How will the possible components of the page pass data to other components?
  • Is there already a component I can reuse for this design?
  • What is the teams conventions on how pages should be built? Do they have a preferred way that components should share data?
  • Is this design actually finalised? If it changes is my approach flexible enough to cope, so if the design does change is there a large amount of work to change the page?

These questions are important, because we need to plan how we are going to build out the pages/views of the applications we build.

There can be times when we as developers are given a design to implement and it at first glance looks so complex that we are not sure where to start, but I think there are a few points we should remember in order to get started.

  1. Iteration – the first attempt doesn’t have to be perfect, you can always iterate on the implementation
  2. Feedback from others – getting feedback from others is important to get their perspective, but you still have to use you original ideas as starting point
  3. There is no perfect way – there are many different ways to create a layout from a design, there are best practices (for efficiency and performance) but trying to hit that perfect approach first time is impossible

Angular is great, it gives us so much out of the box, but it is too easy to just start throwing out components using the Angular CLI, that this few minutes planning of how to turn a design into a set of components can be missed, which may lead to problems later.

2018 Review

Writing a yearly review is not something I normally do, but after speaking to some other independent developers, it seems like it is a good idea, just for yourself to see what you’ve accomplished throughout the year.

What went well in 2018

Well, had another year of solid work, with no long-term breaks between contracts.
I worked on 3 major projects, one Angular project and two Ionic mobile apps.
I actually had my best year financially, bringing in the most I have since I started working for myself, which is very satisfying.

I’ve also managed to work remotely for over half the year, which was one of the goals I had for 2018. I do enjoy working remotely, mainly because I don’t like commuting into London every day, the trains in the UK are rubbish. Unfortunately, I do think I’ll have to go back to London for my next contract, as they will probably want me to work onsite in their offices.

One of my other goals for 2018 was to get work directly, which I managed to do. I found my latest contract through a connection on Twitter, who knew someone looking for an Ionic developer. I contacted them and we arranged a telephone interview and that was that. It turned into a really fun 3-month contract, which is soon to end, but it’s great to see that getting work directly does work.

One of the other ideas I’ve had for 2018 was to start writing a book. I was thinking of ideas and planning to go down the self-publish route, using something like LeanPub, but through a couple of blog post I’ve written on Angular and Ionic I was contacted by Packt Publishing to write a book for them. I started this in October and still have plenty to do. This is one of my main goals for 2019 to get this book completed.

Throughout 2018 I’ve worked with in some great teams, learnt a lot for them all. Each new team I work with I learn new things, new ways of working, new approaches to how people develop.

A lot of these yearly reviews mention how many books they’ve read or how healthy they have been for 2018, but for me, these are just ongoing things. It’s interesting to see some of the books that people have been reading, but I’m not that concerned about how many I may or may not have read.

What didn’t go so well in 2018

I definitely got too caught up in spending too much on content marketing. In 2018 it seemed everyone was releasing a new course or a new book, which is great. I do believe that content marketing is a great way to promote yourself and the work you do. It is something that I plan to do more of myself in 2019, but I did find that I bought a few too many freelancing books or online courses. Many of them I still haven’t read or watched. So I’m planning on not doing that so much, instead just taking what I’ve learnt from the ones I have read or bought and applying that to my business.

I have also found that I did fall back into just contracting instead of running my own business a few times. What I mean by this is, I have been working on a few projects as a development resource, where I get paid to work daily, 9-5 as an extra developer on a project. This is fine, it can pay well and has kept me working for the last few years. But my aim is to change how I work so I can get work directly as a consultant instead of a development resource. Instead, clients will come to me because I can solve a problem they have. This will take time to set up, as I need to be able to show potential clients what problems I can solve for them, prove that I can do this and also have the business skills in place to win these new types of clients. This is a goal of mine for 2019.

So all in all 2018 was a good year for me and my business. Writing out these yearly reviews do help you take stock of what you have achieved, now I need to start planning out my goals for 2019.