Webdings... Web What?02 Jan 2016
TL;DR – In this blog post, I share my personal story of how I discovered web development and came to passionately love it. Also about my mistakes and misconceptions along the way. It is not about the “ultimate truth” but rather about my personal observations and perception.
So, it will probably be more interesting to you if you are now in a similar situation to the one I was in at the beginning of the way. It was a long way and it took me at least a year to come to understand what web development was all about. I will be very happy if my story helps you to shorten yours. And, of course, your comments are more than welcome.
Hello, Reader. My name is André Roussakoff. At the moment of writing this post, I am 57 and I have never in my life had a blog of my own. I have never realized that it would be so hard to begin. There is so much to say and I have yet no clear understanding of what my blog will finally look like. Only that I have to start.
Oh yeah, about webdings. Go check my About page.
I have been an application developer for many years, mostly developing the backend applications and SQL databases. Working mostly with .NET and C#. I had no clear notion of the existence of web development as profession. Websites fascinated me by their beauty and style. Creating websites I called web design and I thought that it had everything to do with creative art and Photoshop skills. Being an application developer, I had a feeling that it lay outside of my profession.
Until several years ago. Then one day I was confronted with the necessity to create a website for a good acquaintance of mine. Somebody mentioned CMS as a tool to create websites and I started my research about CMS. Of course, the most popular were WordPress and Joomla!. Unfortunately, both packages were written in PHP and I was in no hurry to learn another programming language even before I have created my first website. I must admit that I failed at the latter anyway because just using the standard menu options, I was never quite satisfied with the results.
Separation of Concerns
However, that CMS research on the positive side gave me the notion of separation of concerns. That when thinking about a website, one has to consider these four notions:
- Form (structure and presentation)
- Style (CSS)
- Content (information)
- Behavior (UX)
and that these can be treated rather independently of each other. That was a breakthrough because I suddenly saw a bridge to the world of OOP (Object Oriented Programming), which was very familiar to me and that one does not have to do all at once. With it also came the realization that my understanding of the notion of web design covered but a small piece of the whole story. That in terms of activities related to the website creation, we can distinguish (at least) the following three:
- web design
- web development
- content management
Web design has indeed a lot to do with artistic creativity. Web development has to do with tons and tons of programming. And content management is the main responsibility of the actual website owner.
At this point, I decided to look deeper into web development. To my utter amazement the deeper I looked, the more there was to learn and the more confusing it all seemed. In Holland, we have a saying: “Because of all the trees, one does not see the forest”. That was definitely true to say about me at that moment. Even now to some extent, I must admit, although I begin to have my preferences.
Zooming further in on web development, I discovered there were two major areas of it:
- front-end or client side development
- back-end or server side development
and those developers who are doing both often talk about their work as
- full stack website development
Front-end development has more to do with the visible to visitors part of the website, like menus, animations, complex UX tricks, DOM manipulations, etc.
Back-end development has more to do with the “invisible” activities, like user authentication and authorization, HTTP requests handling, data and database manipulation.
Websites vs Apps
The next “tree” was the realization that mobile devices like smartphones and tablets often require a special approach and that apps we download for an app store are not the websites we browse on our PC or notebook screen. One can distinguish roughly four types of apps:
- web apps
- native apps
- mobile apps
- hybrid apps
A web app is, in fact, nothing more than a classic website, which we view on a mobile device using any installed browser.
A native app needs first to be registered within an app store like Windows Store, Apple Store or Google Play. Only after that we can download it and install on our mobile device. Thus, a native app is not a website but an application.
A mobile app is a web app that has such look and feel that, when started, it is practically undistinguishable from a native app.
Finally, a hybrid app combines the features of both worlds, web and native, and can access the mobile device’s hardware. E.g. imagine an app in an app store, which is a wrapper around a classic website. Or a cross-browser app, which is customized to work on mobile devices independent of its platform.
One special sort of apps is a SPA (Single Page Application). A SPA has look and feel of a website or a native app with many pages and menu et al. Whereas technically it is all the time one and the same page object, only its elements are in-place replaced by new elements depending on the user action. E.g. the next image replaces the previous image or the content of another page replaces the content of the current page. And due to caching this can happen even without communication between the client and the server.
The next “tree” came as a shock. Being a .NET developer I was supposed to “hate” all things Java because all Java developers “hate” all things .NET. Also, being a Windows developer I was supposed to “hate” all things Android or macOS. Same reason. All this was quite difficult to digest. Yet, maybe 90% of all mobile devices in the world are not on Windows platform. Have I landed in the wrong camp without even noticing it? The obvious answer seems to be ”yes”, isn’t it?
On the other hand, one can ask another question: should I switch camps at the age of 57? Would it be reasonable and feasible? Fortunately for me, Microsoft seems to also have realized this gap and the hard choice that many a Windows developer was facing because of its previous policy.
As of last year, Microsoft came up with a number of new tools. It went open source with ASP.NET 5 (a.k.a. ASP.NET Core), MVC 6 and Entity Framework 7. It became partners with Cordova for the possibility of cross-platform development under Windows. And it brought out a wonderful light-weight code editor, Visual Studio Code (VSCode), which is absolutely NOT a clone of Visual Studio but rather a brother of such editors as Atom, Brackets or Sublime Text and even works on Linux and macOS.
At the same time, I have found out that I can run some traditional Linux/macOS tools under Windows like Nodejs.
As a developer, having all these tools at my disposal, I don’t feel in any way limited by Windows platform as to the kind of web development I can do, now or in future.
Yippee! I don’t have to switch the platform!
MVC and REST API
In this final part of the article, I want to talk about the concept of separation of concerns that I have mentioned earlier and in a very different context. When talking about CMS, this separation was related to Form, Style, Content and Behavior. Now, I realize that on a lower, more technical level this “external” separation of concerns can be hard coupled with the beautiful MVC (Model-View-Controller) paradigm. MVC relates to the way we structure our code in terms of responsibilities and it determines the division between:
- Model (representation of the data structure)
- View (the way to present the information to the user)
- Controller (application logic behind the scenes which binds Views and Models together)
Angular has also such advantage that, in combination with Ionic framework, it makes it easier to create cross-platform apps. And as to React, it is the Facebook’s main development tool.
On the server side, I have discovered the wonderful world of RESTful API. Simply explained, it is a two-way translation between the URL string composition and the corresponding action that has to be executed. Here is a couple of trivial examples how a REST API could look like:
- http://website.com - show home page
- http://website.com/articles - show list of articles
- http://website.com/articles/1 - show or update article with id = 1
Surprisingly, it has become quite a big article, over 2000 words. I have told you about the different steps I had gone through before I had discovered the “forest” of web development as my new love. Although there are so many different puzzle pieces in the web development picture, there some important binding concepts that keep it all together and give me the feeling of beauty.
- the most important central notion of separation of concerns (both in CMS and MVC)
- the possibility to use same toolset for different aims (different apps and SPAs), so everything become more accessible and understandable
- Microsoft going open source with the latest release of ASP.NET, MVC and Entity Framework and its support for traditional Linux/macOS tooling as well, so no necessity to switch to Java camp
- huge open source community behind all of this, which made it possible for me to come this far and maybe even inspired me to write this article
This is by far not the end of the way! It is only the first step. From complete illiteracy to learning to read and understand something of what I have read. A much more difficult step is the next one: learning to write. Meaning developing complete projects from A to Z and thus using the tools I have learned.
I believe I have yet to add a link here and there in case somebody becomes interested to go into more details on some tool or framework, although Google search also can help.
Thank you, the Reader, for coming this far. If there is anything at all that you could add as feedback on this article, please do. Be it positive or negative. I will accept it thankfully.