Tag Archives: Bootstrap

lirkr mobile view

Lirkr Angularjs & Bootstrap Update

Lirkr has had a recent face lift from the old.

Over the past few weeks I have been working on getting the ui rewritten in angular along with using Twitters Bootstrap as the style foundation. This was important for a few reasons; mainly rapid iterations and mobile support.

lirkr mobile view

Lirkr Mobile Supported News View using AngularJs and Twitter’s Bootstrap

 

Angular

First, it allows better caching of content loaded from the server and thus frees up the server to do more with less. Rather than returning recent searches I can simply store them in the application for later referencing and this is done quite easily thanks to angular.

Secondly, with angular everything is state based thanks to ui-route, a library that plugs into angular. Ui-route will allow the application to determine what state to use based on the url path. It also supports url variables, case handling for specific urls. Ie: default a certain directory to a specific state.

A heads up warning should be mentioned in regards to angular js. It isn’t the quickest thing to pick up as it does require you to wrap your head around best practices which can be flaky in the documentation. There are regular cases where one page will tell you the best practice is one way and the following page will say the complete opposite.

Bootstrap

Bootstrap was a good choice was deciding what to include in the client tech stack changes. It allows simple and easy desktop, tablet and mobile support. It’s as simple as adding classes to your containers and letting bootstrap work it’s magic.

Bootstrap has some lovely documentation with the addition of generating css that contains what you want and removes what you won’t need. By using this tool you can trim what isn’t needed right out of the gate and get yourself a smaller css sheet.

Summary

You can view the changes to the website here.

There are some significant changes. The first big change is the lack of search engine optimization; there isn’t any. The website loads into states and the states are all javascript. Unless google uses the v8 engine and meta tags on the site are added, there will be no crawling.

The second big change is the url paths. I went from having ‘/news/tech’ to having ‘/#/news/tech’ This was caused by the urls that are required in order to drive the angular states. Even with the added vhost changes I couldn’t see a way to keep the old url scheme.