When I started thinking about this subject I thought maybe it was just me, in my particular situation and work experience, who got left behind web technologies. But after conversations with many senior developers, I concluded this is a pretty common theme among us and a problem worth tackling.
But don’t be afraid, you are not alone, and it’s perfectly normal to be able to write a full blow car physics algorithm and not to have a clue how to write a “hello world” web page. For those who started the proper way (from basic HTML to older AJAX techniques and then dived into exotic new frameworks such as AngularJS), I ask you this: Imagine learning Angular without knowing what a <div> is. How would you feel?
The reverse is also true: imagine doing a physics engine in C++ without understanding pointers and recursion.
Before we move forward into web application structure, let’s point out one of the biggest differences: there’s no compile!
We are used to the following flow:
- Write Code
With web apps, you simply write code, then you refresh the webpage. The latter step being sometimes a combination of running and debugging. And depending on which technologies you use, the refreshing is also optional. So you end up writing code and seeing the changes live. How cool is that?
So here is a list of important key concepts which helped me jump ship from as3 to web apps:
1. You are building HTML. Always!
This is one thing which, although it seems extremely trivial now, it wasn’t easy to grasp in the beginning. When using ANY web technologies your end result is HTML. Everything you do involves creating, manipulating and styling HTML components, also called DOM nodes.
You might be somewhat familiar with <head>, <body> of an html site, but the building blocks of the layout are really divs, tables, lists, buttons and input fields.
3. Goolge Chrome is your other best friend
One of the most difficult things to wrap your head around web application development is the dev environment. You might be used to Eclipse, Flash Builder, Visual Studio – and all of the sudden all the examples you see are done in Notepad++ at best, no compile, and just browser refresh.
This will take some getting used to, so I highly recommend trying out different setups. The two most common editors are Sublime Text and Webstorm. Bonus points if you write a full stack app using vi only 🙂
I also recommend getting very familiar with Google Chrome’s developer tools, as they will provide tremendous help when developing and debugging.
4. Social Network is the new “Hello World” app.
It is widely acceptable to jump into a new programming language or technology by writing a “hello world” program. This is not good enough anymore. The new “hello world” should be a fully functional social network (including deployment to a cloud based service Amazon Web Services or MS Azure). I did mine in 30 hours, so if you skip on endless Facebook scrolling, you can do too during a long weekend!
The social network should have at a minimum the following:
- Landing page for sign-in or sign up
- Create/Edit profile
- Make friends
- live, real time encrypted chat module
- Native iPhone, Android and Windows Mobile apps.
- backoffice / admin tool for the social network.
- This tool should have the capability to see stats of the system, ban users, send mass messages, remove accounts, etc.
Although you are not expected to be a designer, the app should not look like it was put together by a developer. There are many styles of UI components which look very nice and could be used. If you are a developer, it doesn’t mean you can’t create good looking apps without the input of a designer.
Creating and deploying a Social Network app will make you understand all aspects of the technologies used. And although you will not become a database guru, you will at least have an idea of what it means to persist data to a database and how to retrieve it and what technologies to use.
I always believed that great products are built by great teams, not by great skills. Anybody has the ability to improve their technical skills and there will ALWAYS be a better solution and room for improvement. What differentiates good products from mediocre ones is how well the team works together. A team of average coders that get along very well will put together a much better product than a team of elite coders that don’t get along.
5. Choosing the right technologies – chose all!
One of the most daunting tasks for a CTO or software developer when starting a new project is to chose which web technology to use. There are so many! And so many combinations! The best way to decide is to create a series of small pet projects and use different technologies for different ones.
For example, we can take our social network example and first build the backend in Node.js and then build the same functionality in Ruby. This would be an excellent exercise to compare multiple technologies. You can then dump the code in github and show to potential employers that you wrote open source software 🙂
6. Understanding the lingo
Above, I listed most of the key words which are currently hot in the web development world. I will explain to them in simple, plain english, so that you understand how they all fit together:
The UI is how the app looks – colors, styles, fonts and animations. These are controled by css (css3) bootstrap and jQuery.
7. Bring value to the customer!
The most important lesson is by far bringing value to the customer. This goes beyond programming and software engineering. This is the thing that should pop in everyone’s head when thinking about a new product. Why are we migrating from Flex to html5? or Why are so many companies re-writing their software? Because the end-user requirements change constantly.
When making the decision of which framework to use, besides the technical details or requirements, a CTO should also keep in mind the available work force for hire. At the time I’m writing this article, React / Redux is a very cool and funky new framework for developing web apps created and backed by Facebook, but it would be a pretty dumb idea to create a product using it if you expect to hire 10 more programmers next year. The reason is you won’t have anybody to choose from!
Another value you can bring to the customer using web technologies is the long term maintainability of the code. Since all these technologies work interchangeably with one another, it is very important to ask the following questions:
- How easy is it to re-write part of the app in the future? (the UI, the back-end, the database)
- Can I easily find programmers to maintain my code in 2 years from now?