PubNub Messenger: Appifying, Responsive UI, and Future Improvements (Part 3 of 3)
•
1 j'aime•622 vues
For those of you that are joining us after part two welcome to the final part of this series. In the last part we expanded on our chat application by adding room management, chat history, and user presence. Now we will wrap up the series by appifying our project through PhoneGap, tweaking the responsive UI, and I will talk about future improvements.
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (11)
Plus de PubNub
Dernier
Dernier (20)
PubNub Messenger: Appifying, Responsive UI, and Future Improvements (Part 3 of 3)
- 1. PubNub Messenger: Appifying, Responsive UI, and Future Improvements by Dan Ristic www. .com
- 2. This is the third of a three-part series explaining how to build a multi-user messaging application using jQuery Mobile and PubNub. If you missed the previous posts in this series check out the series overview, part one or part two here. For those of you that are joining us after part two welcome to the final part of this series. In the last part we expanded on our chat application by adding room management, chat history, and user presence. Now we will wrap up the series by appifying our project through PhoneGap, tweaking the responsive UI, and I will talk about future improvements. As a quick note from here on out I will be showing fragments of the final source code that will not work by copy and pasting. This is in order to focus on the learning points and keep the code examples shorter. If you would like the fully working version please check out the final version of this demo at https://github.com/dristic/pub-messenger.
- 3. Using PhoneGap PhoneGap is a hot topic in the JavaScript world now and has been for a little while. It is a great framework that gives you a base for taking HTML and JavaScript applications and turning them into native mobile applications. I have used a few different frameworks of the same type and would have to say PhoneGap is the easiest to get up and running quickly. What I used PhoneGap for is turning PubNub Messenger into a native application for iOS and Android. This works by creating a web view for the application that loads the index.html file into it and displays the output on the screen much like a web browser would. In both cases PhoneGap utilizes the underlying web browser technology meaning you will not find much difference in functionality between the two. It also gives us access to native interfaces for geolocation, accelerometer, camera, and more. As for getting started with PhoneGap I can honestly say the documentation is the best resource. You can find the getting started guides at the PhoneGap Getting Started Page. Simply pick the one you want to work with and follow the guide to create the application shell. Then drop the index.html and messenger.js files into the application and hit play. It is that easy and works well out of the box.
- 4. Improving With Appcache Application cache is one of my favorite API’s from the latest HTML 5 specification. What it does is allow much more control over the caching and versioning of files and even lets the user load your app without network access. This is done by adding a cache manifest file and including it in the html header through <html manifest=”my-manifest.appcache”>. You can see my cache manifest on the right: I am basically caching everything on the page so it forces loading from the cache as much as possible. This greatly increases performance on mobile phones because even going to the server to see if a file has changed can take a long time. This prevents that by only having to check once for a new appcache file, and if a new appcache file isn’t available, loading everything from disk. Also, do not forget to add the network portion to the cache to fix issues with ajax requests not going through. Now our application is loading quickly inside of a native mobile application. Let’s pat ourselves on the back and move on to responsive UI design. CACHE MANIFEST # 2013-05-13:v1.3.2 # Explicitly cached master entries. CACHE: index.html css/screen.css img/pw_pattern.png js/messenger.js http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css https://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic http://code.jquery.com/jquery-1.8.2.min.js http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js http://cdn.pubnub.com/pubnub-3.4.4.js NETWORK: * FALLBACK:
- 5. Responsive UI Design I know many of you are thinking it is just a buzzword but I wanted to talk a little bit about responsive UI design and how it fits with PubNub Messenger. Personally I think being “responsive” is an overused term that people use as a silver bullet but it does have its place in front end development. In the application I use media queries to give the user a degraded experience when working on smaller screen sizes. The one place I use this is on the chat room screen. On a smaller screen size I decided that there was not enough room to show the user list as well as the current chat messages. I use media queries to hide the user list box so it does not appear at all. In the future I might spend more time with it and add a button that allowed the user to pull up the list when they wanted to. I also added some queries that scale the portion of the screen taken up by the user list to ensure that the page looks balanced on larger screen sizes. To me this was the best decision to be able to use the same code base for all platforms without having to compile multiple versions of the app. If the app was much more complicated I would start looking into producing multiple versions for different screen sizes. The idea here is that contextually the user is looking for something different from each device. They might want a quick message update on the phone and a large overview of all chats in the desktop version. This all leads into scalability and future improvements.
- 6. Future Improvements Overall I would say the app is pretty sound. We get some great scalability built-in by using jQuery Mobile and PubNub. Using jQuery Mobile allows us to add screens and components easily and quickly knowing that they will work across many devices. The PubNub API then gives us the back end scalability to go global with a large load of users out of the box. We can then upgrade our service with the click of a button once we acquire more users. The biggest improvements that we can make to the code is starting to split the JavaScript into multiple files. We can then use something like Grunt to build our source code into one JavaScript file for the application to download. We can also utilize frameworks like SASS to allow our style sheets from growing too large. We can also improve the functionality of the app by building additional features such as buddy lists, Facebook and Google login, and private messaging. It would be easy to take this project and upgrade it to a full-fledged chat application that rivals some of the best commercial ones available today. I hope you enjoyed this three part series on creating PubNub Messenger and look forward to more tutorials on the amazing things you can do with PubNub. We also want to hear about your improvements to PubNub Messenger so tweet us links to source code and demos we can check out!