Client Side Architecture Part Three: Your Turn!

In our two previous posts, we talked about the benefits of client side web architecture. To talk the talk is one thing. To walk the walk is something else entirely. Moving to client side architecture implies mastering a new set of skills. For one thing, you'll have to learn JavaScript. Taking this step can be pretty daunting, even to the most skilled developer. Here are some tips to help you out.

Get rid of the fear

Fear of the unknown should never be underestimated, although most of the time it isn't justified. Front-End Engineering seems to have a strange tendency to generate this fear. It’s new. It’s fast-moving. It’s scary. A few years ago I worked on a project where one guy did all the Front-End related work. Everyone else, including me, was too afraid to even look at the code. Then our Front-End guy left the project and I became the Front-End girl. As it turned out, the code I found was in fact well-structured and easy to understand. It only took a few hours before I actually started to enjoy myself. A few weeks later I was sold on Front-End Engineering and have been ever since. The best way to handle fear of the unknown is to face it. It’s not that bad, I promise!

Give a demo

Convincing people to invest in new technologies is never easy. Management is asking why it should spend more money. Developers are asking why they should learn a new technology stack. Demos are a great way to generate enthusiasm and obtain buy-in for your ideas. You can give a demo to management to show them the positive impact of client side architecture on the user experience. Or you can give a demo to the development team to lower the barrier for client side architecture. By showing some code you can demonstrate how easy and valuable Front-End development can be.

Do a brown-bag

A brown-bag session is a voluntary and informal meeting during lunch time. You could organize one to give a demo about client side architecture. The advantage of a brown-bag: it's very approachable. Anyone can stop by, and nobody has any meetings planned. The key to reach a broad audience is to take away any barriers, making the session as approachable as possible. Why not host it in the cafeteria, where people are having their lunch anyway? And hey: free sandwiches.

Face the monster that is was JavaScript

JavaScript suffers from a bad rep. Its tendency to quickly evolve into spaghetti-code is well-known among developers. While this used to be true, things have changed over the last couple of years. JavaScript is now a mature language and there are plenty of frameworks to help you write clean, well-structured code. There's no denying it: the web is everywhere, and JavaScript is the de facto language of the web. So JavaScript is here to stay. In the future, it will become an important skill of many developers. You might as well face the monster now and get some fun out of it!

Learn from the past, live in the present, plan for the future

Organize a course

A course is the best way to gain experience with new technologies. Make sure there are plenty of hands-on exercises. Personally, I love courses with pair programming. You get to learn from the instructor and from each other. Don't have the expertise to give the course yourself? AE has several Front-End experts to help you out. Depending on your specific needs, AE offers courses, clinics and assessments.

Subscribe to online courses

There are many online courses to get developers up to speed with new technologies. The advantage of an online course is that everyone can learn at his own pace. My personal favorite is PluralSight, because of its high-quality courses that focus on real life examples. Another great resource is Egghead. Their videos only take a few minutes and are great if you have some time to kill. Be sure to combine an online course with some practical experience. Nobody learns to ride a bike by watching videos, the same goes for coding.

Set up in-house projects

Attending a course is great, but if you don't get to apply the stuff you've learned, you forget about it pretty quickly. One way to deal with this, is to set up in-house projects where developers can apply the new technologies. This way they gain experience, and the things they learn along the way will stick for much longer. At one of our customers, developers created a web application in AngularJS to order sandwiches, which is now used daily by everyone in the office. Why not create a web app for timesheets, or for handing in expense notes?

Get a pro

So you've done it. You've convinced every one of the benefits of client side architecture, and now you're starting your first project using the new technologies. A good piece of advice is to have at least one Front-End expert on your team. Someone who can coach the team members and keep an eye on overall structure and architecture. Someone who can help solve problems and keep the learning process enjoyable. Someone to broaden the knowledge of the team and show them some neat tricks. Rest assured: it will pay off!

Pick your pilot

And pick it well. Choosing the right pilot project is crucial. A poor choice of project can lead to the dismissal of a new technology. A good pilot project is neither too big nor too complex. Choose a project that allows you to quickly show the added value. Management will be happy, and you will have an easier time mastering the new skills. Two birds, one stone!

Use a framework

You’ve heard this a thousand times before: don’t reinvent the wheel. This is especially true when dealing with the web. There are some truly great JavaScript frameworks out there. Some frameworks help you deal with the different browsers and their quirks. Some provide you with great features like two-way binding and dependency injection. Some even help you to structure your code. AngularJS, my personal favorite, does it all! New frameworks are popping up every day. They're fun to experiment with, until you stumble upon a serious issue. Only to find out that support has been discontinued. Stick to a well-established framework and you will be fine.

Use TypeScript

TypeScript is a typed superset of JavaScript, which compiles to JavaScript. That's right: it compiles. This means you will see errors at compile time rather than at runtime, as you would using plain JavaScript. Another major benefit is that java and .NET developers will have an easier time learning TypeScript than JavaScript, because the syntaxes resemble each other. In addition, TypeScript, with its classes and interfaces, feels more object oriented than JavaScript. CoffeeScript is another example of a JavaScript superset.

Tools for the Web

There are several IDE's and editors to boost your productivity as a web developer. Good IDE's offer intellisense, refactoring, navigation, debugging and source control integration. Integrated build automation, e.g. support for task runners like Gulp and Grunt, is definitely a plus. For those of you using the .NET stack, Visual Studio is the obvious choice. Other good IDE's include WebStorm and IntelliJ. Microsoft has just released Visual Studio Code, a new editor for Web and Cloud development. It's still in preview but it is looking very promising. VSCode runs on Windows, Linux and Mac OSX. It supports many useful features and it's totally free!

Apart from an IDE, I regularly use Chrome Developer Tools, Postman and Fiddler.

Listing all tools would require another blog post. John Papa beat me to it and wrote a post comparing several editors and IDE's.

“The world is moving so fast that the man who says it can't be done is generally interrupted by someone doing it.” - Elbert Hubbard

Are you taking the leap towards client side architecture? Or have you done so already? I would like to hear your thoughts! Feel free to leave a comment below.