Angularjs, Material Design and Twitter Streams – A Twitter Live Search App

Tweet about this on TwitterShare on LinkedIn5Share on Google+9Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

Recently I have stumbled upon Angular Material an Angularjs implementation of the Material Design and wanted to take it for a quick spin. This post gives an overview of  the same along with couple of other technologies.

If you have not heard about Material Design, take a look at this.

Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices.

The material design project for Angular is

a complementary effort to the Polymer project’s paper elements collection. Our goal is to provide a set of AngularJS-native UI elements that implement the material design system.

In this post, we will be using Twitter’s Streaming API to access public stream with the help of a Node module named Twit and then filter the stream based on the search text a user enter.

We would be using socket.io to keep the Node.js server in sync with the Angular client.

The final app would look like

Screen Shot 2014-11-08 at 2.44.12 pm

You can find the completed code here.

So, let us get started.

Architecture

The app we are going to build involves

  • Node.js
  • Twitter Streams
  • Socket.io
  • Angularjs
  • Material Design

And it is very essential to understand how these go along with each other.

archi

As you can see from the above diagram, when a user establishes a new connection, we will dispatch a web page that consists of the initial view and we will start listening for a query event on the socket.

And when the user searches, we will create a new stream instance using the Twit API with the provided search keyword and then start listening for events on the stream. Whenever there is a new tweet on the stream, a Tweet event would be fired.

And inside this event, we trigger our socket to emit the new tweet to the client. And then on the client, we will be listening for the tweet event and update the UI. Finally Material Design is used to enhance the UX.

Simple and easy!

Angular Material

As mentioned above, Angular Material is the counterpart of Polymer’s Paper elements. You can take a look at the Angular Material components here. There are fewer but adequate set of components that you can directly use to build a web page easily.

Angular Material provides a grid system that is built on top of Flex box. You can find more info on the grid system here.

In our app, we will leverage the grid system to position the elements on the page. And we will be using the Tabs component to build the search results interface, Card component to show a tweet and a Button component to show the Tweet link.

Setup the server

Now that we have a basic understanding on what we going to achieve, let us get started.

We will start off by building our server and then the client. Create a new folder named ngTwitterApp. We will init a new node project. Run

npm init

And fill it up as applicable. Next, we will install the required dependencies. Run

npm install --save express socket.io twit

This will take a couple of minutes to complete. The final package.json would look like

Create a new file at the root of the ngTwitterApp  folder and name it server.js. We will configure Express and Socket here. Update it as below

Things to notice

Line 1-7 : Require dependencies

Line 9 : Configure the Twitter client. You can get your Twitter client keys by creating a new app or you can follow this to help you setup.

Line 16 : Set the public folder as a static folder, which we will create in a moment.

Line 18 : Default route to dispatch index.html, which we will create in a moment.

Line 23 : We set up Sockets to start listening for a new connection.

Line 24 : Save the connected client to track and manage.

Line 25 : When a new query event is received, we will check if the current user has already subscribed to this event. If not, we will create a new stream on line 30.

Line 34 : When the stream emits a tweet event, socket will emit the same to its client

Line  39 : Fired when the Limit on the stream has reached.

Line 43 : Fired when there are any warnings on the stream

Line 48 : This is triggered when the Twit client tries to reconnect, if connection to Twitter fails.

PS : This happens when you try to run more than 2 streams parallely. 

Line 52 : This is triggered when the stream is disconnected.

Line 56 : We save the current query against the user’s socket id for managing the queries.

Line 60 : This is the remove event on the socket, when triggered will stop streaming the search results and remove it from the searches  object.

Line 66 : When a user disconnects, we don’t want any streams running in the background, so we will stop all the streams and delete the user instance from searches  object.

Line 77 : We start to listen on port 3000.

This is our complete server! Simple right!

Setup the client

Create a new folder named public at the root of ngTwitterApp folder. We will maintain all the client related files here.

We will be using bower to manage our client side dependencies. If you have not already installed bower globally, you can do so by running

npm install -g bower

We will init a new bower config file to track our client dependencies. Run

bower init

We will install 2 dependencies. One the Angular Material project and another the Angular Socket provider. Run

bower install --save angular-material angular-socket-io

PS : If prompted to pick between angular#~1.2.6 and angular#1.3.0, pick angular#1.3.0.

The final bower.json would look like

Now that dependencies are done, we will setup the index.html. Create a new file named index.html at the root of the ngTwitterApp folder. This will be served by Express when we request the home page.

Update index.html as below

Quite of lot of things are going on.

Line 6,7,8 : Refer required CSS. And for this app, I am using the default theme.

Line 80 : Refer Socket.io

Line 82 – 86 : Refer Angular Material libs

Line 87 : Refer Angular socket provider

Line 88 : Init our Angular app

Line 11 : We init the Angular module

Line 14 : We init the Angular controller

Line 16 – 23 : Consist of the Form that will Add a new search/tab

Line 25 : We use the md-tabs components to show all the tabs from the tabs variable in scope.

Line 36 : We use the md-card component to display each tweet

Now, we will work on the Angular code. Create a new folder named js inside public  folder. And then create a new file named app.js inside it.

Update app.js as below

Things to notice

Line 1 : Create new Angular Module and inject the dependencies

Line 2 : Create a new instance of the socketFactory and expose it as a Factory

Line 6 : Create an App controller

Line 12 : Logic for adding a new Tab

Line 31: Logic to remove a Tab

Line 44 : Logic for Add New Search button

Line 56 : Whenever a tab is selected, we set the current selected tab index.

Line 68 : This method is fired when we add a new search. We emit an event to create a new Stream using Twit. And then start listening to it for the tweet event.

Line 73 : We show only the latest 10 tweets from the stream at any point.

And finally, we will add a few styles to clean the UI. Create a new folder named css inside the public folder and create a new file named app.css. Update it as below

You can download the link image from here.

Save all of the files and run the app from inside the ngTwitterApp folder

node server.js

And navigate to  http://localhost:3000 and you should see the freshly baked Angular Material app powered by Twitter streams!

Screen Shot 2014-11-08 at 2.44.12 pm

Hope this post gave you an idea on how to work with Angular Material, Twitter Streams and Sockets.


Thanks for reading! Do comment.
@arvindr21

Tweet about this on TwitterShare on LinkedIn5Share on Google+9Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • jkjaskaran

    Hey Arvind, nice article.

    I have just one question, when I run it with say some current trending topic after a while it says limit reached. Can you please explain that point a little bit as to when a limit will reach for any search.
    Is the limit reached from Twitter or from the library?

    Thanks
    Jaskaran

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hey Jaskaran, This is called Rate limiting. This is added on top of the Twitter API to avoid misuse of Twitter’s resources. You can find more info here: https://dev.twitter.com/rest/public/rate-limiting

  • Sosana

    @Nick and @Arvind great convo’s regarding the future of Angular/Material/Iconic….have either of you tried out steriods by appgyver before? had temptations of using this but thinking I will stick with iconic

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hello Sosana, I did use steroids. IMO, it is half baked. I used it to build a Mobile Hybrid app that leverage features like Device Battery and Device Contacts, but because of their “difficult to integrate Cordova plugins”, it makes devs life “difficult”.

  • Nick

    Hey Arvind, this is another great article.

    I’m curious as to how you foresee Angular Material fitting with Ionic’s upcoming Creator (basically, an IDE for Ionic’s front-end framework), which you wrote about a couple of weeks ago. We know that the Ionic team is making major contributions to the Angular Material project, so it’s reasonable to expect that Ionic’s products will support Angular Material directly.

    Yet, Angular Material looks to make large parts of the current Ionic framework obsolete? If I went with Angular Material, I’d naturally replace all of Ionic’s components. And, judging by what the Angular Material team is saying, they are very focused on mobile, so Ionic doesn’t look to have an edge in that regard.

    Do you see Ionic Creator being an IDE for Angular Material? How do you see Ionic framework being positioned versus Angular Material?

    Cheers,
    Nickd

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hello Nick, Thanks much!

      A very interesting question I must say.

      IMO, Ionic Creator can sport a Material design theme but as of today I do not foresee Angular Material to be a replacement of Ionic F/W.

      Ionic F/W has grown a long way since they launched their first version. The cross section of directives that are available from Ionic F/W are very much specific to mobile hybrid development. Where as Angular Material is targeted at the general web as of today. Moreover the design principles of Material Design can be adapted by any user interface and Angular has done it first. I am expecting to a see a material design theme for Ionic soon*.

      Here a few code pens that are developed with Material Design in mind : http://codepen.io/search?q=material+design

      As you can see the cross section of User Interfaces/Interaction components that can built using this design approach. And if Ionic can sport one, then Ionic would be way ahead of Angular Material.

      But again, I would not be surprised if Angular Material comes with a range of directives/services targeted at mobile hybrid development. At that point, we may need to weigh the pros and cons.

      Your comments?

      Thanks.

      • Nick

        Arvind,

        That is helpful, thanks. Good to know that you see Ionic F/W as being so far ahead of Angular Material for hybrid mobile devices at this time.

        However, I can’t help but think that this is going to change very fast, with Angular Material soon becoming a better, if less focused, set of components for mobile than Ionic F/S. Here’s why:

        1) Google has touted Angular Material as being “responsive”, supporting all platforms, including mobile, equally well. If you watch the the talk at ng-Europe about Angular Material from last week, Google says that Angular Material will be highly tuned for mobile:
        https://www.youtube.com/watch?v=2qiyhkQVyxE

        2) Google also has said that Angular Material will be the default set of components, tightly integrated, with Angular v2.0. Given Angular v2.0’s stated priority of “unsurpassed perfomance on mobile”, Angular Material is going to have a lot of development focus on mobile.

        3) The Ionic guys are core contributors to Angular Material. They claim to be bringing their mobile expertise to making Angular Material great on mobile.

        4) From a business standpoint, the brass ring goes to the framework and development environment that supports all platforms equally well, and not just mobile. I think that the Ionic guys see this, and want to be more than just a mobile company.

        So, with absolutely no inside information, and because it’s just plain fun to speculate, here’s my WAG at what’s going to happen with Angular Material and Ionic FS over the next 6 months:

        (a) Angular Material becomes wildly successful as an indispensable UI component/CSS layer on top of Angular v1.3. Combined, Angular v1.3 and Angular Material are the best possible solution for responsive SPA’s, working on both the desktop and mobile devices.

        (b) Ionic Creator v1.0 ships with Angular Material support, making it a superb IDE for both mobile and desktop development.

        (c) The existing Ionic F/S continues, supported by Ionic Creator v1.0, as a dedicated and highly focused mobile solution for AngularJS. However, its future is threatened by Google wanting to control all mobile development for AngularJS v2, and telling the market that Angular Material is the preferred UI solution for mobile on AngularJS.

        (d) Drifty, the company behind Ionic, makes the successful business transition from Ionic F/S to Angular Material.

        That’s my story, and I’m sticking to it :–)

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Hello Nick,

          Quite a comprehensive response. Thanks for sharing your thoughts and predictions on this. I really would love if your prediction comes true :).

          But still some part of me will always look at Ionic to be a Mobile hybrid solution when compared to Angular Material, for its minimal footprint.

          Thanks.

          • Nick

            > But still some part of me will always look at Ionic to be a Mobile

            > hybrid solution when compared to Angular Material, for its minimal

            > footprint.

            I can’t argue with that thinking, Arvind. A dedicated, focused solution for mobile, (as opposed to a universal solution for all endpoints) will always have a following.

            This is a subject that interests me a great deal because I think it’s at the heart of the highest stakes battle in the computing industry: namely, the fight between Google and Apple for control of mobile and, tied to it, the web browser. There seems to be an industry-changing battle looming between these opposing positions:

            1) On the one hand, you have Google promoting a single, “responsive” solution for all devices. They’ll call it “mobile first” because mobile is critical, but, by definition, that kind of mobile support must be compromised, if for no other reason than desktop support must add to its footprint.

            But “responsive” is irresistible to companies who find the cost of multi-platform development or who don’t need native API’s for their mobile apps.

            2) On the other hand, you have dedicated, high performance “mobile only” solutions from Apple and (among others) Ionic, who would argue that “responsive” solutions must always be inferior.

            Obviously, there will always be those apps that require being closer to native platform API’s. But this in an ever-decreasing proportion.

            Google has been very public that their strategy to beat iOS/XCode/Apple is strictly focused on one objective: namely, winning over developers with a “responsive” platform that serves all endpoints, including desktop. This is why I think that Ionic, who is dependent on AngularJS and Google, is in a very precarious position. As AngularJS v2.0, with its stronger mobile story and built-in Angular Material, approaches, Google will start marketing it ferociously as the answer to XCode/iOS, and argue that third-party tools like Ionic F/S are unnecessary.

            Material Design and all its reference implementations (Google Paper, Polymer Elements, Angular Material, etc.) is just one way that Google is “loading up” its open, standards-based platform. Google is pouring, literally, billions of dollars into this developer platform because it’s critical to competing with Apple for the future of computing. We developers are the beneficiaries.

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Very nicely put Nick. Google vs Apple in the Rwd vs Mobile Hybrid space reminds me of the console wars between Sony and Microsoft :)! Nevertheless, I still would like to get my hands dirty on Angular 2.0 before ruling out Ionic.

            But when I look at your perspective, I think Angular may not always be the solution for developing RWD/Web/Hybrid Apps.

            Even before Angular/Backbone/Ember f/ws landed in the market, I used to “emulate” SPAs using jQuery and John Resig Micro templates. jQuery for its DOM manipulation, AJAX and animations and Micro Templates to fetch the templates and parse an object and build a UI.

            And for the RWD part, I used to use a minimal grid system like Toast or Pocket Grid to get the job done.

            Sometimes, I think the above is a far simpler and efficient solution when compared to the “ginormous” frameworks.

            Thanks.