Hit enter to search
In CastIt there are multiple channels you can control, with multiple players running even the same channel. You need a way to monitor all of this activity and that is what I was aiming to rebuild with the task. The control panel was already built using react. Great. What else? CastIt is mainly built in PHP but the part I am calling and pinging for information is node.js.
So I started with Angular 4, which I will refer as it is called - Angular. Now some intro about Angular. Its main purpose is to build SPA apps, unlike Vuejs which can be used for SPA but also for different application types too. Soon I realized it’s not enough to go through the official Angular documentation.
There is much more you need to learn in order to get started. After some reading I decided to move and change development environment. I started with Visual Studio Code as the new development environment from now on. There are many reasons for that. Its lighter, much faster and it has great TypeScript and Git support. Using Angular with VS Code required additional effort and learning. I had to install and learn a bit about Node.js, to use NPM, Webpack. First, you need to install Node.js and NPM. Also you need Webpack – module bundler which simplifies your work tremendously. Without it, it would be pure hell. So I started with Angular command line interface (cli) as Angular documentation suggested and installed a new application which in turn gave me a template that included built-in support for TypeScript, Webpack, Unit tests. TypeScript support seemed natural.
As for unit tests, template had Karma and Jasmine unit tests preset. Unit tests launch in chrome browser, with visual feedback for each test. So it was very useful and convenient to use. Visual Studio Code offers autocompletion, F12, “ctrl + .” support which is Visual Studio alike. So that’s really cool. And what is best, after a while or better said right from the start, I realized TypeScript has many similarities with .NET object oriented programming, which I found as a great feature. Its type safe and I find that as an important benefit (because of my .NET background). You can make and use interfaces, you have constructors. Another thing that I noticed was code separation, that is, Angular template initial setup structures files in a way that it separated html, css and TypeScript. I find that as a big plus as you keep away business logic from html / css part which should not be concerned of it.
Modularity is one of major Angular features. When coding with Angular it is all about organizing code into the buckets. Angular also introduces services, which are place where you can write reusable business logic, extract and encapsulate unique repeatable functionality. Also it is notable that Angular strongly relies on dependency injection. It is implemented in a simple way, which is nice. Another benefit of all modularity, components and services is that in terms of coding styles Angular guides developer how to and where to write code.
Some notes and ramblings. To reflect on Angular complexity. For example, animations do not seem like a great implementation by Angular – code syntax and results were way too difficult compared to yielded results – so in the end I abandoned using Angular animations. Similar situation is with pipes. Pipes are used to manipulate and transform data. Pretty weird term for what is usually called filtering. Actually it takes in data as input and transforms it to a desired output. In my case I needed channels table to be able to be sortable. Should not be complex, right?
No. So Angular uses pipes and for me the concepts was kind of weird. It was like separate piece that will not fit into the puzzle at all. Another note that adds to confusion is that Angular documentation suggest to use impure pipes with great care. If pipe is set as impure then they track changes and can easily impact user experience so be careful when you use it. It’s like, why not have it simple when you can make it complex.
Syntax is also kinda inconsistent, you can write same thing on several different ways. But only one miss and it will not work, without any warnings. For example with pipes, arguments are separated with colons? Don’t know why. Syntax to do two way binding was unusual as well or transferring event data from one component to another parent/child component is not that natural as well. In the end I can’t escape the feeling that learning curve for Angular is just too long and not backed up with enough docs. So seems too much an effort in the end or better said an undocumented unfinished product yet at the time of writing this.
Regarding the syntax, some parts are pretty similar to Angular. I am referring to template syntax like v-for and *ngFor or v-if and *ngIf. One note though, Angular syntax is case sensitive. But there are some special cases with vue as well, like with html attributes, where camelCase property names are using its kebab-case html equivalent. With note that I spent no more than 2 weeks working with it so I would not be surprised if I missed many features and details and that many of them have their alternatives. It was only that I did not have enough time to learn more about them. For example later I discovered there is a vue template that adds support for TypeScript. That said, it means object oriented feeling I got with Angular, can be achieved with vue using that template.
Still we can say TypeScript is not there by default, so small advantage for Angular (in case you are into TypeScript as I am). I mean TypeScript is not 1st class citizen in vue. My final impression is still that Angular is more modular than vue. I also learned that, while Angular has all the functionalities you need within its framework, routing, state management, http, its validation, animations, … basically has everything under its umbrella, on the other hand, with vue I had to use some additional 3rd party libraries. For example, you don’t have built-in http/ajax support. Instead axios library is suggested as a 3rd party implementation. Even though it looks cool that you have all when using Angular I could not find many downsides because of it. I can imagine it may cause some breaking changes over the time but Angular was prone to breaking changes within its sole framework too.
Well, although in general it was positive experience while working with vue, there are some things normally I did not like. For example, at least on first try, vue project template uses mocha, karma and phantomjs as a browser for unit testing. And using phantomjs as a browser is not as nearly convenient as it is in case with default Angular setup. Also debugging and stepping through the code in console did not work well too. For example, setting a breakpoint would not work for some specific lines. It seems it is related to source-map setting, but I was unable to resolve it in the short time I had available.
Which is the chosen one? On one side you have Angular backed up by Google. Still vuejs seems lighter and faster, not supported by giants but still has some notable implementations like for wizzair, euronews, alibaba, baidu, facebook newsfeed. Later I found out that vue is supported by the chinese retail giant Alibaba. Still, because Angular is powered by Google it has bigger influence on the job market. So if you consider to sell your expertise as a developer, Angular might be better option at the moment of writing this.