The frontend king

The king is dead, long live the new king!

Misko Hevery and the Angular team revolutionized the way we work. When I first heard about Angular, was back in 2012 when there was a new breed of frameworks that wanted to dethrone the king at that time, jQuery. Backbone, Ember, Knockout, Angular, all wanted a part of the pie. I actually created a couple of projects with Backbone which was the first that earned some kind of popularity, and attended a seminar organized by Microsoft Greece to get to know a bit about Knockout. But it was Angular that seemed the best solution to create SPA applications, and it didn’t took long before it skyrocketed to the top.

The new king enjoyed a couple years at the throne, but it’s own creators decided to abandon it (not exactly accurate, but… yeah) and bet heavily on a new, completely different, incarnation of Angular, Angular 2. That was about the time that Facebook announced that Facebook.com was already functioning on top of a new framework called React.js.

It took a while for people (including myself) to realise that markup inside js files is not the worst idea ever, and that JSX is actually useful. Slowly and steadily, React popularity is growing and it recently reached over 40000 stars on github, soon to overcome Angular 1 with 48000. It’s obvious that a new king is rising!

So, seeing the old king abandoned and destined to die, I had to make a choice: Angular 2 or React?

React has React Native, Redux (that I really wanted to have for some projects back in 2011), it embraced es2015 and has a vibrant community and a huge ecosystem.

Angular has the brains that created one king already, selected TypeScript and took the bold decision to create something completely new from scratch.

Whoever is the new king, it’s certainly time for new and exciting things.

P.S. I already read a lot about React and I’m already creating a project with it! I’m sure I won’t be able to keep my hand of Angular 2 either in the future 😛

Angular.js app powered by Google Docs

We all know and probably have used Google Docs. Its a very useful tool to write documents and have them sync across devices and platforms or cooperate with a colleague real-time on a document. On the other hand, Angular.js helps us create a full featured application or website that can function on its own, needing only a server to read and save data. What if we use Google Docs as our server to read and write our data?

The need

A client had many documents on Google Drive and wanted to present them to his clients with an enhanced User Experience. It would be very cumbersome to copy and paste those documents into the editor of another CMS, having to update 2 documents (in the CMS and in Google Drive) every time there is a change.

The connection

Google Docs is an online word processor according to Wikipedia. In other words, it is a very powerful WYSIWYG editor. To create a basic blog, you need a login page that takes you to an administration panel that allows you to write your blog posts. That’s exactly what Google Docs offers. You login with your Google Account and create documents.

Fortunately, Google provides a full featured API for most of its products, and Google Docs is not an exception. Being a part of the Google Drive family of products, we can access everything through the Drive API and we are able to create something way more powerful than a simple blog!

Angular Communications Architecture

Using Angular.js for almost two years now, we have a standard architecture that we use for most of our projects. Angular provides Views, Controllers and Services to structure your application. To communicate with a server, we also have a standardized way. We create Angular Services that are injected into a Controller and perform the request.Those services have a very simple set of methods that allow specific actions. When we communicate with a server built by us, those Services are created based on Restangular. When we need to communicate with the Google Drive API, we make sure that those Services are being called exactly the same way, even if internally they are very different and not based on Restangular.

API Authentication

This an example of the GDAuth.js Service that we use to Authenticate with the Google Drive API.

App.service('GDAuth', function($q) {
  return {
    authorize: function(options) {
      var deferred = $q.defer();

      gapi.auth.authorize(options,
        function(result) {
          if (result && !result.error) {
            // Access token has been successfully retrieved, requests can be sent to the API
            gapi.client.load('drive', 'v2', function() {
              deferred.resolve();
            });
          } else {
            // No access token could be retrieved
            deferred.reject();
          }
        }
      );

      return deferred.promise;
    }
  };
});

The GDAuth Service provides only a single method, the authorize, that we can call in our Controller to authenticate and be able to perform the rest of the actions that the API allows. It needs a single parameter, with the options as expected by the Google Drive API. We don’t want to create a new API on top of the original when its not necessary.

File retrieval and display

Retrieving the contents of a specific file, is very easy.

gapi.client.drive.files.get({
  'fileId': gdriveId
});

The code above returns a file object, provided the file id. This object contains the complete document, including all the necessary styles and images (hosted on Google Drive) to display it exactly like you previously created it on Google Docs. Because we want to display the document inside an Angular application, we use regular expressions to find the document styles and content and add the styles in the appropriate place, that’s inside the html head tag and the content on its respective place.

Maybe you should add a brief paragraph naming most of the features drive can handle this way here, this way you will captivate the developers/geek’s mind.

Final Thoughts

The final application can read Google Documents, images stored in folders on Google Drive and on the fly create galleries to accompany the document topics. We also used the document description to add metadata about the categories that those documents belong to. Future developments for the same project with feature Google Spreadsheets that will be used to create Graph Charts using JavaScript in the application with filtering and live updates.

Angular.js for jQuery developers

JavaScript was created back in 1995 but made a comeback with the introduction of Ajax and jQuery in 2006. Nowadays, over 60% of the 10000 top visited websites in the world use jQuery and most front end developers are familiar with Javascript and jQuery.

But since jQuery is so popular, why invest time into learning a new JavaScript Framework?

Framework vs Library

The first difference is a big one, jQuery is a library and Angular.js is a framework. What does that mean? A library provides some useful utilities in order to make things simpler and faster. Combine that with the uncountable jQuery plugins and you can do almost anything. A framework on the other side, offers a very specific project architecture that helps a developer organize his code, make it modular and DRY and also comes with preinstalled and required libraries. In fact, Angular.js has the jqLite library included, which is a limited version of jQuery.

UI Encapsulation

To create an accordion with jQuery, you will probably try to find a jQuery plugin and read the instructions on how to implement it. Implementation includes adding the required elements, a few divs, a list, list items and maybe even more. Why not just add an element. Angular.js can create new HTML elements called directives that encapsulate HTML multiple elements and JavaScript functionality.

SPA (Single Page Application)

Websites built with Angular.js are Single Page Applications. SPAs are very fast and responsive on user interaction. This is possible by the MVW architecture (explained below) that separate the data from the presentation of data. Of course SPAs have some disadvantages like the Search Engines index crawlers that most can’t run JavaScript, and thus can’t index SPAs. Since Angular.js in built by Google, it was expected that Google Search will soon start to support it, and the first steps are already done.

MVW (Model View Whatever)

Most modern frameworks implement an MVC architecture and so does Angular.js but allows for simple applications that don’t implement controllers. The separation of Model and View allows for cleaner code, distinctive purposes for each file, and maybe even different developers working on them based on their specialty.

Final Thoughts

Angular.js is not a jQuery replacement, but it is certainly something that will be in the Javascript scene spotlight for the years to come. Although it is a very powerful framework, it is not the best solution for all projects. For example a SEO critical website, might be better suited for a more traditional implementation at the moment, but for generic web applications Angular.js is the way to go.

angular-browser-storage

Hey, it’s been a while i wrote something on this blog, despite having a weekly reminder to make me visit this site more often. I keep looking around to Angular stuff, but i’m also thinking about some other stuff that I might (or probably might not) write about in the future.

While working on Angular, I needed a temporary storage option. I had heard a lot about localStorage indexedDB, webDB but never really tried any of those choices. So, it was about time to investigate further into those solutions.

Checked all the possible solutions, but caniuse and the notorius Internet Explorer limited my options. So, I decided that localStorage was the way to go. So I created an Angular module to make using local and session storage easy.

I’m kinda new into creating open source repositories, but I tried to create a github repository based on what i’m looking for when i’m finding a repository, all the info i need on the repository readme file please. The repository is located here ( https://github.com/Knorcedger/angular-browser-storage ).

I won’t include any info on how to use it here, thats why the readme file exists, right?

Angular.js

Recently, I started working on a new project, in which we will use Angular.js for the frontend part and node.js/mongodb for the backend.

The framework we chose for node is Express. I really love the simplicity of Express. But my main part is the frontend. I really like the concept that Angular introduces. The html is the the one that gives orders to the js, something is totally different based on what i was used to with jQuery and the DOM manipulations.

While the project is evolving, we needed a Google Map to display some POIs. I made an initial implementation, I then transformed it into an Angular.js directive but just today I realized the correct way to create a Google map directive, when I first saw https://github.com/nlaplante/angular-google-maps. I will try to rewrite my directive based on Nicolas Laplante’s awesome work. The final result might be similar, but the target is to create my first fully functional and parameterized directive.

I will have more info on this and maybe a Github repository as the work is going on.