Chrome

Chrome For Enterprise

During my work with big organizations I got many questions about deploying Chrome for enterprise. What are the management capabilities? Which policy I can control? Is there an option to use MSI? The good news is that most of the answers are… Yes! Chrome/Chromuim supports few ways to control your browser’s activity. It can be done by using group policy, MCX files and external configuration files. In the end of the day, the administrator of your organization can manage and control all the Chrome installations. One of the main question CIO/CTO has is about the option to control the auto-updates. Well, You can control it. For more details you can read the first bullet in the list below. The other items in that list will help you understand more on the capabilities and see how you can deploy it on any network (windows, linux and mac).
 

(*) More information on all the benefits of Chrome for enterprise and businesses can be found here. And as we know, in the business world the EULA is important as well.

Chrome Frame

Another great option for enterprises that need to work with IE is to install Chrome-Frame. Chrome Frame is an Internet Explorer plug-in that renders specific web pages in Chrome. That’s right… You will be able to use the latest HTML5 features (e.g. see amazing 3D WebGL charts) inside your IE6-8. It’s very powerful way to empower your people with modern browser today.

Standard
Chrome, HTML5, webdev

Google Drive on GDL IL

Here is my talk from last week with Nicolas Garnier (Developer Advocate for Google Drive) on the new aspects of Drive. You can have a short intro to drive and then dive into:

  • What are the key features developers should be aware of when working with Drive APIs. For example: all the Drive SDKs you can use with your favorite technology (e.g. Java, Php, Python etc’).
  • Show some new apps that are doing good job in integrating into Drive. We spoke about best practices and OAuth2.0
  • Learn what is next for drive in the near future…

Psst…
If you want to see more GDL-IL episodes, feel free to ‘Add our show‘ to your calendar. It’s going to take 15-25min of your time every WED at 14:00 Israel time (IST)

Standard
Chrome, HTML5, JavaScript, mobile, webdev

HTML5 Modern Web App and Google Cloud Endpoints (Part 2 Of 3)

Pre-reqs

  1. Google Plugin for Eclipse
  2. Google API JavaScript client library
  3. Sign up for Cloud Endpoints

User Experiences demands are pushing modern web apps to a more distributed architecture.  A pattern many developers have used is using a MVC framework on the client and communicate to the server with REST. Google App Engine’s easy to build, easy to manage environment makes it ideal for REST APIs for Web backends.  At Google IO 2012, we made it much easier to build REST APIs on App Engine with Cloud Endpoints.

Cloud Endpoints enables you to build REST and RPC APIs in App Engine.  It leverages the same infrastructure  Google uses for its own API and as such, you get strongly typed clients for Android, and IOS as well as a lightweight client for JavaScript which we will be walking through in this presentation.

In getting ready for IO, Ido and I thought we’d build a modern web application using Cloud Endpoints.  We decided on a topic that would be relevant to both App Engine and the general web developer community, something we both have some interest in and something generally useful…. a Beer rating and review web application.

Try it out yourself at:  http://birra-io2012.appspot.com/

Continue reading

Standard
Chrome, HTML5, JavaScript, mobile, php, webdev

Modern Web Apps at Scale With Google App Engine (Part 1 Out Of 3)

modern web apps exampleThere is no secret that today any developer that wish to built the next G+Path, Instagram etc’ must think on two major aspects:

  • Server Side / Cloud Service that she is going to use in order to create the API. Here we must answer some important questions like:
          1. What will I do if I get a huge spike in traffic?
          2. Will I need to manage it? Do I have to do it?
          3. How will I communicate with different clients?
          4. Which technology to use in order to store: data, state etc’
  • Client side technology
    • Web technologies: HTML5, CSS3
    • Mobile native app: Android, iOS and Windows.
In this post I’ll be focusing on the client side (and later this summer I’ll have another few posts on the server side) and what we should use in order to build a modern web application.

Modern Web App

It’s not an easy definition since web technology is running very fast. Nevertheless, we can find certain features across successful web apps:

  • Self Contained & Functional– They all have one specific goal and they do their best to provide the users the functionality to get to her goal. Few examples:
    • New York Times – Consume news.
    • Hipmunk – Find a flight that is the ‘perfect’ for your needs.
    • Gojee – Find the recipe you would taste and say WOW after it.
  • “Offline first” – You will want your web app to work offline. It’s an important feature that will let your users be productive on places like: planes, subways and on spots like: Starbucks when you don’t have (always) good connection. Another very important benefit will be the improve in performance. Since the app will work locally (first) and then sync the state/data the users will get responsiveness that are far better from an app that need to ‘wait’ for network on every action that the user does.
  • Client Side Architecture – Since we are moving big parts of our ‘logic’ to the client we need to think about methods that will keep our code readable and maintainable. I guess this is the main reason why we see so many MVC Frameworks. The only advice I can give here is to try few of the popular ones and see how they approach the separation between the data and the UI. If you have some time go over The Top 10 Javascript MVC Frameworks Reviewed. Then, after you try ‘some’ you will be able to pick the one that fit the bill in the best way. For the busy developer (I know… most of us don’t have too much free time 🙂 – Go and play with these three MVC (some will say it should be MV* because it’s not really MVC more MVVM, MVP):
ember.jsEmber.js – Don’t waste time making trivial choices angular.js Angular.js -Lets you extend HTML vocabulary for your application backbone.jsBackbone.js – gives structure to web applications by providing models with binding, collections and views
  • Device Aware – We all know that mobile is going ‘up and right’. So when you design your web app you should think on progressive enhancement and how it will fit  to different screen sizes. Good examples to look at are: Gmail, Flipboard and Twitter. If you want to go deeper on this interesting subject there is a webcast on ‘mobile web apps’ I did with Oreilly three weeks ago. You can go over the slides as well.

Challenges and Solutions

Challenge: What to do first (mobile app, web app, both). Focus is the most important thing for a startup so what should we do?
Solution: Built on the server a RESTful API that allow you to consume it from any platform. The way to work with an API is similar (more or less) to all the platforms although in the web we have some interesting new tools that we can use. If you are working with Google APIs here is a new API Explorer that is very useful to browse the capabilities of each API and to try it live.
Challenge: How to make the web app functional with clear goal?
Solution: Invest time and effort in your UX (and later the UI). Some taking it a step further and say that you should focus only on great UX and all the rest will follow. Who said apple?
Challenge: How should I work with RESTful APIs (in our case – google ones)
Solution: The first excellent tool will be Google JavaScript Client Library  Why it’s so powerful?
  1. It save us the trouble to reinvent the wheel and built simple functionality like: CRUD operations, list, order, search etc’. It’s all baked in it.
  2. It provide us some powerful new features:
    1. RPC Batch
    2. CORS
    3. Authentication out of the box
    4. Version control
    5. Super Simple
Challenge: How to make my application ‘offline first’?
Solution: With HTML5 we have few APIs that let us create web apps that will work great when there is no connection. The first step is to pretend that there’s no internet connection. It will force you to implement a sync layer that works only when online. So you will give the users the ability to add/edit/remove data and when the connection is online your app logic will do the syncing with the server. In order to have our app offline we should use two important features:
  1. Storing (static) assets: we can use AppCache. It’s our ability to save locally our html, js, css files and all the images, sound files etc’.
  2. Storing data: localStorage, IndexedDB, File API. This is a hot (and large) topic. I would suggest to read deeper on when and where to use each over at html5rock.com

webIntent

Challenge: There are so many web services I would love to hook into my app – How can I do it without reinventing the wheel each time? In other words, I want to give my users the ability to edit photos, share on twitter, g+ and Linkedin (just to name few).
Solution: WebIntent! If you are familiar with the intent system that is flourishing in Android you know what I’m talking about. We now have a powerful solution for the web. Web Intents is a framework for client-side service discovery and inter-application communication. The code you need to add to your app is as simple as:

var sharingDetails = "Check out my....";
var intent = new Intent(
            "http://webintents.org/share",
            "text/uri-list",
             beerDetails);
window.navigator.startActivity(intent);

The best part is that it will work on most browsers with JavaScript shim and in Chrome (19+) it’s built into the browser natively!

Google Chrome FrameChallenge: What can I do on old browsers that do not support HMTL5 very well?
Solution: Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome’s open web technologies and speedy JavaScript engine to IE. You can add it to your web app with one line of meta tag: <meta http-equiv=”X-UA-Compatible” content=”chrome=1″> or configure the server to send this http header: X-UA-Compatible: chrome=1 in both scenarios your users will enjoy the wonderful world of chrome (v8, HTML5, CSS3, WebGL etc’) inside their IE. Important fact to remember is that your users do not need admin rights (on their windows PC) in order to install it.

I hope this gave you some points to think about during the planning and designing phase of your next web app. For startups and developers that have an app in production, I would suggest to check what are the building blocks that will make sense to implement first (e.g. web intent, clean the client code by refactoring it to an MVC framework etc’).
This is the first post in a series of posts, I hope to cover Google App Engine in the next one and then combine the two worlds in the last post that will be more of a ‘cookbook’ to best practices of leveraging Google App Engine and HTML5.
Standard
Chrome, HTML5, JavaScript, webdev

Web Workers And Big Data – A Real World Example

Web Workers in the 19th centery

I had an interesting conversation on G+ with developers around web workers and the need to a ‘real world’ example that use ‘big chunk’ of data. In this example we will dive into this senario. No more, ‘hello world’ and calculation of some nice number (Pi, e etc’). In the code we will take an array of 33.55 millions numbers (~=32MB) make some calculation on each and everyone of them and return the new data to our main page/app. We will use  transferable objects because they are a new powerful option to ‘move’ (not copy) big arrays in and out the worker. Since the support for transferable objects is done with: webkitPostMessage() (so far). We will use Chrome as the browser for these examples.

This is the main page of our example. In the code snippert below you can see the test function that let us choose the method of delivery.


// The entry point for our comparing. 
function test(useIt) {
  // useIt: true  - use transferrable objects
  //        false - COPY function for sending the data. 
  var useTransferrable = useIt;
  setupArray(); // create the 32M array with numbers

  if (useTransferrable ) {
    console.log ("## Using Transferrable object method on size: " +
                 uInt8View.length);
    // This is the syntax to send by using trans-obj.
    worker.postMessage(uInt8View.buffer, [uInt8View.buffer]);
  } else {
    console.log ("## Using old COPY method on size: " + 
                 uInt8View.length);
    // Simple send msg that copy the data to the worker
    worker.postMessage({'copy': 'true', 
                      'ourArray': uInt8View.buffer});
  }
}

and here is the worker that is doing the hard work on 32M of numbers. You can think on better ways to do ‘hard work’… Specially if you are in the world of WebGL and you have big matrix under your arms.


  // Here we are 'computing' something important on the data. 
  // In our case - just play with % if you have new hardware
  // try: Math.sqrt( uInt8View[i] * Math.random() * 10000);
  for (var i=0; i < dataLength; i++ ) {
    uInt8View[i] = uInt8View[i] % 2;
  }
  
  if (useTransferrable) {
    self.postMessage(uInt8View.buffer, [uInt8View.buffer]);
  } else {
    self.postMessage(e.data.ourArray);
  }

The results are clear (as the sun over the beach in Maui). It was much faster to work with transferrable objects.

web workers - compare options to move data in and out
With transferrable objects it took us 292ms while with copy it was 533ms.
Last but note least, you can find more examples and deep coverage on web workers in my book on web workers. Psst… if you can’t sleep, it might help you on that front as well.
Web Workers - The book

Standard
Chrome, webdev

Dart Crawler Example

In the Dart hackathon I got few questions about applications on the server. The best way was to try and give the hackers a code sample… It’s by definition a very simple code but I’m sure that you can take it to the next level without any problem.

this example could be consider version 0.01 of a real crawler. You do need to add to the real first version features like:

  • Discovery – Be able to get links from the current page and jump into them. This is much harder then it sounds, as you want to make sure it won’t continue forever.
  • Parsing – parse the information on the page. Try to gain the meta data and add it to the ‘real’ content (which is based on your goals from the crawler).
  • Analyze – Meaning, normalize the information of the page and put it in a storage (DB, file, a cloud solution etc’).
  • Logging &Monitoring – As this server side process will run while you are sleeping… It’s best to have some good ‘watch-dog’ on it. The start will be with some simple logging and analyzing of the logs. The second step will be to use a tool to monitor the action.

Key lessons:

  • There is a real need to libraries that will make the parsing better. xPath, DOM to Map (or Array) etc’.
  • The debugging in the editor could improved… and as a first step you might want to use a logging library that will give you a lot of information for each step.
  • The editor making the development phase very nice with warnings on (almost) every issue that you might do. I found it very productive to be back in the good hands of ‘IDE’.
  • I guess that in the near future we will see some good examples that use Dart VM on the server – It’s going to be interesting to profile their performance and see where do we stand vis a vis other modern languages like: Scala.
Standard