Bootstrap, other Javascript Tools/ Frameworks and Keeping Up With Appearances
I don't know about other developers but I have this 'technical development topics list' ... products/ technologies/ concepts I've come across in passing but don't seem to consistently manage to dig into. This is particularly an issue currently as ...
a) there is just so much "stuff" to learn about in the (Microsoft) web software development space. 10 years ago it was far easier to keep abreast of the main development technologies. Now it's not possible for one person to cover all the bases and specialisation is required, at least if you are going to dig into anything in any depth
b) closely related is the changing landscape of devices and development for those devices, which increases the aforementioned complexity still further; native vs cross platform/ device anyone?
Anyway, in an attempt to facilitate making some personal headway I thought if I try and blog about some of these topics, once a week say. A laudible idea but let's see how this goes. Not well so far as this post has been sitting here unfinished for a month!
The New Way
A few years ago the ASP.NET web dev picture was different in several ways, including that life for the developer was simpler. We had ASP.NET web forms with postbacks, server controls and associated viewstate. Those server controls gradually got better in terms of user experience. People complained about how the web forms approach didn't facilitate unit testing and about the clunkiness of the state management. Ajax became more popular and this didn't fit that well into the Web forms way. Similarly Javascript, particularly in the form of jQuery became more popular as processing moved to the client in the drive for the more responsive UX. RESTful services are becoming the order of the day.
The "cutting edge developer" called for a more testable framework with less 'plumbing' and more control. Now we have ASP.NET MVC (as well as Microsoft web pages) which seems a better fit with this new Javascript-centric world than web forms. Of course there is then the option of dumping Microsoft/ Visual Studio completely for client development, and there is increasingly the option to continue this at the server side with technologies such as node.js.
Back to the client. With increased use of Javascript/ reduced use of Microsoft plumbing code have come a host of competing "frameworks" to supposedly make life easier for the developer. If you don't spend half your life trying to work out which framework you should be using for a given project that is. K.Scott Allen (check out his Pluralsight videos) was on DotNetRocks recently and one of his hopes for the year was that the web dev landscape simplified. I agree ... if we could go a little way back to it being more obvious which frameworks to use, and when, whilst also maintaining the benefits of this "brave new world" this would surely be a happier situation. So, Scott rattled of a few technologies/ projects/ frameworks during that show so let's very briefly cover those and I'll plan to return to cover more of them, and probably other new ones that have popped up in the interim, in subsequent posts. Oh, and these are from my notes from the show to follow up on so I may have also added one or two more than were originally stated! Some of the headline descriptions provided by the tools' sites are not very useful but ...
- Knockout (http://knockoutjs.com/) - 'simplify dynamic JavaScript UIs by applying the MVVM pattern'
- Backbone (http://backbonejs.org/) - 'Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.'
- Spine (http://spinejs.com/) - 'Build Awesome JavaScript MVC Applications' - useful overview description right there!
- Angular (http://angularjs.org/) - 'HTML enhanced for web apps!' - ditto.
- Masonry (http://masonry.desandro.com/) - 'A dynamic layout plugin for jQuery'
- Modernizr (http://modernizr.com/) - 'A JavaScript library that detects HTML5 and CSS3 features in the user’s browser'
- Bootstrap (http://twitter.github.com/bootstrap/) - 'Sleek, intuitive, and powerful front-end framework for faster and easier web development'
- CoffeeScript (http://coffeescript.org/) - 'CoffeeScript is a little language that compiles into JavaScript. Underneath all those awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. '
- Typescript (http://www.typescriptlang.org/) - 'TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source. '
- Skeleton - I used for my own website and elsewhere (http://www.getskeleton.com) 'A Beautiful Boilerplate for Responsive, Mobile-Friendly Development'. See also this tutorial I found useful.
- LESS (http://lesscss.org/) - 'LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.'
- Further, though perhaps a little different intended scope, Telerik's KendoUI has also caught my eye.
A little more on Bootstrap
So, lots of interesting play things in the arena of client web technologies, likely to help/ confuse us poor web developers but let's have a little closer look at Bootstrap. Of the above it is most similar to Skeleton but whereas Skeleton has specifically targeted CSS support for a 12 column 960px grid system with supporting media queries and a few extras in the form of consistent styling of buttons, forms and typography the scope of Bootstrap is a little larger, seemingly a superset including:
- Scaffolding Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
- Base CSS Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.
- Components Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.
- JavaScript plugins Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.
And that's enough for now. I hope to have a play shortly and report back further.