Angular JS + BootStrap and why it’s all bull
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.
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.
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.
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.
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 (!)
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 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
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 😉