Home > CSS, Delphi, JavaScript, Language research, Object Pascal, OP4JS, QTX, Quartex Pascal, Smart Mobile Studio > Angular JS + BootStrap and why it’s all bull

Angular JS + BootStrap and why it’s all bull

Hype is the number of the beast when it comes to development

Hype is the number of the beast when it comes to development

Web designers and web “architects” as they like to call themselves, are into bling. Their job is after all to help bussinesses sell whatever product they have; be it a perfectly valid product or a completely useless piece of droppings. But with a good designer at your disposal you can to some degree ensure your product will sell. At least at first. So when designers and bling-doctors set out to create their tools of the trade, it’s pretty much natural that they will make it look like the greatest thing since the discovery of the wheel. And people swallow it, hook line and sinker.

JQuery

Take JQuery for instance. It’s a simple little library to collection (query) information about the DOM (document object model). It allows you to set properties on collections rather than single items and it also have a handful of helper functions for effects, css and dealing with JSON and REST.

Eh.. no thanks!

Eh.. no thanks!

Yet when you read the documentation or hear people talk about it – it sounds so fantastic. You can cure cancer with JQuery, did you know that? It’s hype. It’s just spin and you should know that by now.

Angular.js

Angular is, seen from the JS developer’s viewpoint, a fantastic library. It allows you to define content in one place, controller code in another place and Angular gives you the tools to glue those two parts together. The controller is the part which has code, meaning that you access the controller to perform operations on the model (the data) – which is reflected in the view (the html). But wait just one minute! Havent we heard all that before? You have data separated from functions, functions separated from the display — yet they all come together to form a single entity? Yes. You have heard it all before. What I have just described is how a normal class works. The reason it’s divided into controller, model and view has nothing to do with better, next generation or any of that crap — it has to do with the fact that JavaScript doesnt have classes, or inheritance, or polymorphism or any of the fundamental features real programmers expect to find. So if you are a JS programmer Angular is fantastic, because it allows you to break down a presentation (read: component) into logical parts, deal with callbacks and display sequences in an orderly fashion and so on. But for a programmer coming from C++, Delphi or C# — Angular is a childish toy. There is no reason to break these elements apart, that’s why God invented VMT’s (virtual method tables).

Yeah yea, bla bla bla bla, hype

Yeah yea, bla bla bla bla, hype

I mean, have you heard some of these presentations on youtube about angular? Wow. It even get’s me going for a while there. The mental image they paint is that angular is going to solve everything! If you can just use angular, then your website will scale, dance, sing and even click it’s own likes. But when you start coding with angular you realize that it’s just a non-productive way of emulating OOP through objective thinking. It’s technical masturbation. You isolate your data in one place, your procedures in another place and your visual appearance a third place. This is exactly what OOP was created to solve. It may be a step forward for JavaScript, but compared to Delphi, Smart Mobile Studio, C++ or any “real” programming language with OOP — it’s a gigantic step backwards.

Components is MVC

MVC (model view controller) is a programming pattern, or style, which has become very popular lately. It was initially hyped by Apple to get people onboard their Objective C wagon for iOS and OS X development. Picked up by other languages, especially JS which is the mother of all bling, it has become almost the norm. Both in the world of nodeJS and DOM programming in general.

Oh but you can change things easier and use the same controller with different views, or have different controllers for the same view. So? Thats what inheritance is all about:

type

//baseclass for database read values
TBaseDBStorage = Class(TW3Object)
end;

//filtered database values, inherits from base
TFilteredDBStorage = Class(TBaseDBStorage)
end;

//basic display widget
TBaseDisplay = Class(TW3CustomControl)
private
  FData: TBaseDBStorage;
protected
  function getDBStorage:TBaseDBStorage;virtual;abstract;
End;

// display optimized for desktop
TDesktopDisplay = Class(TBaseDisplay)
protected
  function getDBStorage:TBaseDBStorage;override;
end;

// display optimized for mobile devices
TMobileDisplay = Class(TBaseDisplay)
protected
  function getDBStorage:TBaseDBStorage;override;
end;

I mean, the above OOP code allows you to fetch data from a server, and also specialize it as needed. We also roll out two display controls, one for mobile and one for desktop, and we give them different display and layout rules. This is faster and easier than writing two controllers, two data structure profiles, two html segments and two CSS rulesets. Same result, except the code above can be expanded indefinitely without messing up existing models.

So there!

So there!

What people fail to notice is that MVC is just plain old TCustomControl. An ordinary TCustomControl has data (fields), which is a model — methods and implementations which is the controller, and a view (surface, canvas or operative-system viewport). And just like under MVC the code is there to act on the data and control the visual output. What angular does is essentially to rip OOP apart under the assumption that this will make things better. But it doesnt make things better, it makes things worse (!)

Mutation events

Now if you’re a JS programmer feeling you have to defend angular, please relax. I know all about the data binding layer – because just like angular Smart Mobile supports mutation event handling as well. And we do it through proper OOP with full inheritance. Mutation events is just a fancy phrase for “tell me whenever anything changes in the DOM”. So a mutation listner can be created and set to listen to changes on either the whole DOM or a particular piece of the DOM (like your panel or a button for that matter). Whenever a property change, an attribute or a CSS style — you get a callback event with the change data. Using this system Google has made a neat system for binding data changes to visual tags. For instance, whenever you change the value of a variable – you can hook that variable up to a section and have it display the change “live”. You can also bind visual input, like from a textbox, to a variable, another field or whatnot. Sounds familiar?  Delphi Visual Live bindings anyone? Angular creates the illusion of being black magic; and to the JS punters and kids it probably is. But sadly the only spell it casts is one of blinding hype.

Bootstrap JS

Bootstrap has to be, with the exception of jQuery, the biggest disappointment of them all. And I dont write this just to be negative or anything like that. I am genuinely disappointed at how such a small library, containing nothing particular interesting at all, can get so popular so fast. Bootstrap.js is essentially a theme engine. That’s it. Yes you read right, a plain old vanilla theme engine, like we have had in Delphi and C++ for decades now. Bootstrap allows you to define simple constructs, like a panel. It will then automatically align and position your input controls and DIV’s according to a 12 point grid. Does this sound familiar? It should because every Delphi control has an align property, and TLayoutPanel has been shipping with Delphi since 2006. If you add some clever CSS styling on top of that — you essentially have bootstrap.js

Final verdict

In this post I have told you the truth about some very, very big and popular javascript libraries. They are popular and famous because for a JS developer, which doesnt have the luxury of OOP like we do – these libraries is heaven sent. But for everyone who has OOP, like Smart Mobile Studio, there is absolutely no benefit to using angular, bootstrap or jQuery at all. In fact the RTL was designed in such a way that there should not be any unknown tags in the DOM. Hence jQuery is useless because what exactly should you use it for? TW3CustomControl encapsulates the uber-hyped MVC of Angular, our web units outperforms and outweigh the angular toolbox by a factor of 10 — so again there is absolutely nothing angular provides which has any value to a seasoned and professional Smart Pascal programmer. He would make angular.js himself within days (!). Not because he is so clever, but because OOP and inheritance makes it possible. Modern OOP was designed to better help you deal with problem solving, spanning recursively through a well written and designed architecture. This is why OOP rules the world and procedural and objective programming is a thing of the past.

A better and far more powerful way

Over the next six months I will be presenting my web technology. This means that the tools you will get – through smart mobile studio – and the classes you will also get, will help you create web applications that knock the boots of all these 3 libraries. So far Smart Mobile Studio has only been for mobile application development. Well that is about to change (slowly) as we begin to add more and more support for full-on “page” designs. You can naturally create websites today, but webpages demonstrates a slighly different behavior – both in terms of scaling, scrolling and general navigation. You want to create awesome websites with little code? Sure you do! You want to use your Delphi skills to create fantastic HTML5 user-controls which no other language delivers? Sure you do! And you want to connect to databases, REST API’s and your own nodeJS based service layer? Hell yes you do! Well, let’s teach these JS kids how real programmers solve these things 😉

Advertisements
  1. May 7, 2015 at 2:42 am

    Wow, to me it sounds like you don’t want people to learn new things and just stick to the expensive Delphi, considering that these products you are against made waves. Your argument against Angular is not very objective (might be considered lame), maybe because you haven’t created real applications based on Angular (correct me if I’m wrong).

    I am a Delphi developer for almost 12 years now. I have used Angular to build Web Applications (not a website) for businesses hosted in a Linux OS. And One web app is an ERP system (like SAP). It is a widely known fact that Angular is not for building websites but for Web Apps (ie. GMail, Youtube) and even Mobile Apps (see Ionic). I wouldn’t talk about JQuery since I don’t like the “JQuery way” (watch the DOM for changes).

    The mindset in programming with Angular is almost the same as Delphi. You get to concentrate on data, rather than the interface or the DOM. Since Angular doesn’t have the great GUI of Delphi, devs have to code the structure. But once the structure and the components are built, it can be reused just like Delphi.

    Since browsers deal with CSS to layout the structure, some company like Twitter shared Bootstrap. Yes its a theme (in Delphi dev’s perspective), but it took care of the problems with data representation. It auto arranges the view, whenever the user’s screen is changed. And that is done out of the box. Unlike Delphi, this doesn’t have a GUI or a price. Its Free.

    Yes I can’t do OOP in javascript. But this is where Typescript (a superset of javascript) comes in. Owned by Microsoft, Typescript has now embraced Angular. They are helping with the Development of Angular 2. I think the reason for this is, most of the dot net devs or even Microsoft devs use Angular.

    I wouldn’t brush off Angular just yet. It’s still in its infancy. Delphi is old and still great but only runs in Microsoft and still expensive.

    This is the age when a browser takes the job of desktop application, without the worries of being infected with a virus or the limitations of an OS.

    If you’re promoting your product, I would suggest a good comparison on how easy it is to transition from Angular/Bootstrap/JQuery to your product. That way, you can entice these “kids” to use your product as well. They’re still your potential client BTW.

    • Jon Lennart Aasenden
      May 8, 2015 at 7:40 am

      Its not so much a promotion of “my” stuff, as an appeal to people to dont ignore what is already there (OOP).
      One of the challenges we have these days is that each environment has become isolated. So the C++ guys are over there, the delphi guys here, the C# guys in a third box and JS developers over there.
      And each group pretty much end up re-inventing the same wheel over and over again. I just read how Google Dart is going to achieve 120FPS without Java.. we did that 3 years ago. And Adobe did it before us (and so on). But you dont hear people say “we will now get a VMT for our language”. Why? Because thats standard OOP. It’s just “so what”. Point being that if people could check what is classical and to-be-expected first, then we wouldnt have all these quick fix libraries with their peculiarities of achieving the exact same thing over and over again!
      Teenagers have a tendency to go for the tech that gives you fast visual feedback, fast response — and it’s up to us “older” programmers to try to remind them that there is a lot of knowledge in chosing a traditional language first. I would advice people to use C++ or C# more than I would advice them to learn JS and browser tech. You can also compile C++ to Js with EMScripten, which is more or less what SMS does (although we have an RTL, EMScripten is bare-bone). Quite simply because once you know the fundamental concepts of classical programming, you will be able to navigate and use JS much more (in a sense you get JS for free, because it’s just the bare basics of what a language really is).

      Like I said: angular is excellent for pure JS programmers who doesnt have any other aspects to fall back on. It works, it gives results and its a “quick fix”. But like you no doubt have noticed, one of the negative aspects of bootstrap is that every website end up looking and working more or less the same.

      Solving the problems ASYNC web programming represents, especially client/server communication can be done more effective with OOP. A mix between classical OOP and the flair of modern JS gives fantastic results.
      But for server-side, nodeJS and client-JS is excellent. But all solutions without OOP quickly become hard to maintain, hard to evolve and hard to scale. There is a huge amount of man-hours and money which is thrown out the window every day on websites which will never really evolve once the first mold is set. The job of re-writing a huge website based on angular + rest, where the client side JS is in the 10 megabyte range is NIL. You end up re-writing it all from scratch. Which is exactly why we wanted to get away from stuff like ASP (pre .net), ancient perl scripts and the like.

      I think JS is a great language with plenty of cool features, especially nodeJS. But approaching it as a “end all” solution is futile. Only principles survive “death” and rebirth between languages and platforms, and the principles which our whole computing world rests on today, is OOP. So when they learn that first, then they get the rest for free (although that sounds a bit biblical perhaps).

      I use angular on a daily basis and it does have some nice features, implementation wise (it has to otherwise people wouldnt use it), but it’s still running hoops to overcome it’s lack of OOP.

      It’s not always that the best idea wins. I just feel like there is a lot of VHS these days, while people overlook betamax (so to speak). It may be fast and quick, but it lacks depth and endurance.

  2. May 7, 2015 at 6:28 am

    Whilst I agree with the overall point that a lot of these new technologies amount to money for old rope, I do take issue with your description of TCustomControl as embodying MVC.

    The whole point of separating the M, the V and C is that if you wish to have a different V of the M, subject to the same C, then this is easily achieved if the 3 things are already separate. You just add a new V.

    But if the MV and C are all bound together in the one place (class) then you have only two choices:

    Create another control that duplicates the M and the C part, in order to provide a new V.

    Or, overload the V in the existing control so that it may be configured to show either one of the required G’s at any given time. This might be fine if you are talking about a slight variation in an existing list style V, but if one V is a simple pick list and the other V is a complex, editable grid then things quickly become unworkable.

    Separation of MVC in JS may be necessitated by the shortcomings of the language. But separation of concerns remains a valid OO principle even when you have the full arsenal of OO at your disposal.

    +0.02

    • Jon Lennart Aasenden
      May 7, 2015 at 3:32 pm

      Under OOP you can just as easily isolate the controller code in a separate class. And if you start with a baseclass you can have different implementation based on the active view. The polymorphism applies to the data-model and the view. We see tendencies of this in Delphi XE8 (C# has had it for ages).
      The reason why i bitch about it is because much of the underlying mechanics of OOP becomes eroded and lost on kids that start out with this line of thinking.
      MVC is a pattern which works fine in some circumstances, in fact there may be situations where a humble controller can outperform a massive OOP layer of inheritance — but just like iOS and it’s implementation is rooted in proper OOP layers (which JS cannot have by virtue of being prototypal rather than objective) — ultimately it boils down to method. In the end, sad as it is, the best way may not win –only the one hyped and making enough cash to survive.

      But perhaps it’s just me, I find a lot of the so called “new stuff” to simply be a re-hash and re-formation of older ideas. Some brilliant, others pure hype. Angular is fun and it does make things easier from the vantage point of a native JS coder — but from a vantage point of Delphi or C++, it becomes a bit … taking on an astronaut suit to water the plants on a hot summer day. A simple sun-block would have done wonders, and we dont need the overhead recursive angular controllers represents.

      But everyone is allowed to have their pet theory 🙂

  3. patfleck
    May 7, 2015 at 8:17 am

    Bring it on!

  4. Jon Lennart Aasenden
    May 8, 2015 at 9:42 am

    In many ways you can compare it to: Learning by doing vs. 3 years at a university. Both paths provides knowledge and in some cases learning by yourself can give you a deeper understanding of a subject — but if you go to a university you will get a linear progression from start to finish and learn things exactly so humanity dont end up re-invent the wheel.

    This is sort of the missing link in the web world where anyone can do anything (which is paradoxically also one of it’s strengths). Computing has come a long way in the past 15-20 years, and it’s our responsebility to transmit that knowledge to the next generation, and make sure they dont make all the mistakes we did.

    Its really sad that JS was put together in a hurry because the author was planning to add classes and interfaces, but he never had the time. The result is that we have 10.000 frameworks who’s sole purpose is to overcome the shortcomings of not having OOP.

  5. October 8, 2015 at 12:02 am

    I know you have been busy.. But any updates on “Over the next six months I will be presenting my web technology. ” ? Keen to see your new web technology.

  6. January 19, 2017 at 1:14 pm

    Except JavaScript now has classes (since 2016). From before that it already had a way to deal with both objects and inheritance through prototyping. In fact it has several ways to deal with objects, except they’re not what most class-based traditionalists are used to. I often feel like things like JQuery and Angular gets in the way of learning the actual language. Before delving into stuff like JQuary or [insert hype plugin here], freaking learn the language! It’s actually quite good. Or you can try out this fantastic new plugin first: http://vanilla-js.com/

    • January 22, 2017 at 7:53 am

      I have seen a ton of schemes for trying to make prototypes behave like classes. But at the end of the day, true OOP is not hand written, its emitted by a compiler and works according to a well established system.
      Typescript is also not really JS, its in some ways the same that we do – except with less infrastructure.
      But there are many ways to approach JS, node.js and HTML5 – and no one way is the only way to go.
      We firmly believe that Smart Pascal which was tailorer to fit JS better, is the best way to write solid, large applications – but we do understand that others might prefer their way of doing things.

      Some of the DB stuff i see coming out of the JS world is indeed brilliant and new; born out of the shortcomings of JS. But I have no problem stating that yes, that was new and very clever. Right should be right. But JS doesnt have real oop. Maybe we will in the future, but right now its all paper-thin stuff that is baked down to the same old functions behind the scenes.
      Otherwise you would see the instance variable and the VMT, and also the inheritance model would not be based on copying (take a look at the prototypes when inheriting from a baseclass, you will notice that the whole prototype is copied. True OOP would only compile the differences and the self parameter allows a decendant to call on the ancestor code without conflict).

    • January 22, 2017 at 7:56 am

      Also, I fail to see how vanilla.js (or JS classes in general) gives you any benefits. Its just another scheme for trying to emulate what is not there. Classes has been on the table for a long time. I do hope they come, they would make our life a lot easier. But right now we dont need them, we implement our own VMT and the compiler keeps track of instances. This allows us to write libraries that has far more depth than both prototypes and typescript combined. If you are refering to the class function wrapper added in 2015, its just paper thin stuff. More a visual aid than anything substancial.
      https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: