Google+

HTML 5 for Applications

Long ago, in a land far, far, away, I started an introduction to HTML 5 by giving a short history of HTML and the standards process. It was to quickly be followed up with an overview of what is meant by HTML 5 applications. Months later, here we are....

With the Skyline Give Camp just behind us, I thought I would kick off a wave of blog posts about some of the technology we will be used during the Give Camp. First up, let's discuss HTML.

There has been a lot (and I mean a lot) of enthusiasm for HTML 5 for creating applications, but what does that really mean? In general, I believe there are two things people mean when they discuss HTML 5. The first is the HTML standard itself. The second is creating applications using HTML 5. We will touch on each of those.

HTML 5 Standard The HTML 5 standard is really the evolving standard being created by the WC3 and WHAT working group. It is the new parts of the angle bracket goodness that keeps food on a lot of our tables. A lot of what Skyline does is creating applications for our clients where we render HTML server side and send it down to browsers to be rendered. HTML 5 has a lot of new markup tags and attributes to make these types of applications more interactive, discoverable and intuitive for users. I'll discuss these new attributes in more depth in future blog posts.

HTML 5 Applications The real excitement about HTML 5 is for HTML 5 applications. HTML 5 applications can, obviously, be a lot of different things to different people. At its root, is to have HTML 5 be a light container, and then to use JavaScript/jQuery to inject data into the markup.

A way to think about this ... We have done a lot of work with Silverlight. The model we have for that is MVVM (Model-View-ViewModel). At a very high level, this concept involves a View, which has nothing in it other than screen layout and design, a model (our entities or data model) and the ViewModel, which is responsible for getting data and binding itself to the view. In this scenario, the view is very light weight and has no logic, the ViewModel is where all the heavy lifting occurs.

There is a very shaky analogy to this in HTML 5 based applications. Often, you will have an HTML page that consists of markup. Essentially it is the bare bones implementation of the User Interface. This will be sent down to the browser for display. Part of the markup though includes JavaScript references. The JavaScript functions will then call back end data services and inject that data into our view. For example, the following markup could be sent down to a browser

<div data-role="content">
    <div id="twitList"></div>
</div><!-- /content -->

A Javascript or jQuery function could then be sent to "inject" markup into the HTML, such as

    $(function () {
    console.log("binding attempat");
    $.ajax({
        url: "http://search.twitter.com/search.json?q=SkylineTweets",
        dataType: 'jsonp',
        success: function (json_results) {
            console.log(json_results);
            $('#twitList').append('<ul data-role="listview"></ul>');
            listItems = $('#twitList').find('ul');
            $.each(json_results.results, function (key) {
            html = '<a class="avatar" href="#"><img src="' + json_results.results[key].profile_image_url + '" alt="' + json_results.results[key].from_user + '"/></a>';

            html += '<a href="http://twitter.com/' + json_results.results[key].from_user + '"><h3>' + json_results.results[key].from_user + '</h3></a>';

            html += '<span class="details">' + json_results.results[key].text + ' </span>';
            listItems.append('<li>' + html + '</li>');
            console.log(html);
        });
    // Need to refresh list after AJAX call
        $('#twitList ul').listview();
    }   
    });
})

This will result in the retrieved results for @SkylineTweets Twitter feed being injected into the HTML markup as an Unordered List (UL).

Obviously, there are a lot more pieces involved in creating HTML 5 applications. The important thing to take away is that HTML is now considered a programming language. Through a combination of HTML 5 and JavaScript/jQuery, developers are creating great applications. Microsoft's next version of Windows, Windows 8, even supports HTML and JavaScript as a native programming language.

The concept of HTML being a view, and JavaScript being the tool to inject data into the view is an important one to understand!

This blog post originally appeared at [Skyline Technologies] (http://www.skylinetechnologies.com/Insights/Skyline-Blog/March-2012/HTML-5-for-Applications)


 

Tips for Working With International Clients

One of the wonderful things about being a consultant in Northeast Wisconsin is there are so many great companies in our area. The beauty of technology and our inter-connected globe means you can have customers and clients anywhere. Not only has my company acquired customers in the Midwest and across the Unites States, but we have gained customers in other countries as well.

In my time as a consultant, I've learned quite a few things working with International customers. Here are a few tips that will enable you to deliver excellent customer satisfaction, even if those customers are, literally, on the other side of the world.

Time Difference - One of the biggest challenges in working internationally is the time difference between you and your clients. When you have a customer call write down what time it is for each one of the people on the phone that is in a different country. Be sure that if it is 8:00 a.m. in the United States when you start the call, you realize it is 10:00 p.m. in Hong Kong and your client would most likely rather be getting ready for bed. This will help you focus on what needs to get done in the meeting and help you keep the meeting from running long.

Know What Day It Is - When I work with a client in another country on a regular basis, I add that country's holiday calendar to my calendaring software. That way, whenever a meeting needs to be scheduled, I don't have to embarrass myself by not knowing that November 2nd is Day of the Dead in Brazil and nobody will be coming into the office. Outlook and Google calendar, two of the more popular calendaring options on the market, make this easy.

Communication Costs - Communicating overseas by phone can be expensive, especially if you are making calls several times a week for hours at a time. There are several excellent options that enable you to mitigate these costs.

In many countries, a good percentage of people are now using Skype, a software application recently purchased by Microsoft. Skype does an excellent job of enabling you to talk to several people at once. In my experiences, numerous organizations use Skype and many of them prefer it to a phone call. Obviously, all of the call participants need to be sitting at or near a computer for this to work.

Google also has voice calling options within their Gmail application. If you use this option you'll want to download Google Talk so you can quickly make a call without logging into Gmail.

Both these application require the people you want to communicate with to have the software installed. If that's not an option, or you have customers who exclusively use landlines, both Skype and Google offer the ability to buy minutes to call people directly. These rates are generally MUCH cheaper than dialing internationally over the phone.

Finally, Microsoft Lync has abilities similar to Skype and Google Talk, however there is the added benefit of being able to share computer screens and for multiple users to work on the computer desktop at the same time.

There are many other options available for effective communication such as Instant Messaging, Google docs, Go To Meeting, and more. However, nothing beats a person to person call.

Culture - Given the size of the United States, our culture is very similar across the country. It can be very surprising to see the amount of differences in other countries, especially in Europe. For example, Switzerland has three official languages: German, French and Italian in a country the size of Vermont and New Hampshire combined.

In India, when a person shakes their head up and down, instead of it meaning yes like it would in the states, it generally means a person is saying no.

The United States is also a large country for both political and economic reasons in the world. You can almost guarantee that customers you have overseas know who the President of the United States is as well as some of our recent political news.

The reality is, if you want to be able to engage with your customer, you owe it to yourself to pay attention to what happens in the countries where they do business. Economist Magazine is a great business resource for this. It discusses the political and policy situations in many countries and will make you a better informed person when talking to clients from other parts of the world. A less expensive option is Google News, which has the ability to set the edition of the page that is displayed. So if you will be spending a week with a customer in Britain, check out the British edition of Google News for a couple of weeks before heading over there.

Remember, you are building your business ties based on your relationship ties. If you visit another country and your potential client says a dish is a local favorite, or something they are particularly fond of, they are most likely trying to introduce you to a part of their culture and share it with you. So, when visiting Scotland if a client says they love haggis and ask you to try it, be sure you do!

Working with clients overseas can be a very rewarding experience. Just be sure you are respectful of the customer and their culture and make sure you sit and listen before speaking. In today's global economy the world is your customer base!

This blog post originally appeared at [Skyline Technologies] (http://www.skylinetechnologies.com/Insights/Skyline-Blog/December-2011/Tips-for-Working-With-International-Clients)


 

Observations From Microsoft's Build Conference

Overview

Build was a bit of a different conference.... Initially, when it was announced at MIX it was called PDC (Microsoft's Professional Developers Conference). PDC generally has topics that cover the breadth of the Microsoft eco system from a developer's perspective; creating ASP.NET applications, C# , VB.NET , Entity Framework this and Entity Framework that. Build was NOT that, it was specifically dedicated to Microsoft's upcoming Windows 8 operating system, and especially to the new Metro UI introduced as part of the OS.

Windows 8 is, quite obviously, the next version of Microsoft's Windows platform. Microsoft is laser-focused on optimizing Windows for alternative form factors, especially the tablet. They have reduced the footprint of Windows by eliminating several core services that start up as part of the Operating system as well as the memory footprint. A demo played on an old netbook showed overall resource usage actually decreased when moving from Windows 7 to Windows 8, the first time that a new version of their operating system has had decreased baseline hardware requirements.

The biggest change though is the introduction of the Metro UI for Windows, which can be thought of as the tablet interface for Windows. It is a 'fast and fluid' touch-based interface, similar in some ways to Windows Phone 7, especially in the use of the Live Tiles, which are uber-icons that update with information. Take a look at the screen shot below to see what the new 'start screen' looks like, gone is the iconic start menu introduced in Windows 95, replaced with a 'Windows Phone on steroids' style home screen.

Win8screen1

The interface has been well received by folks at large. It's a pretty bold reworking of Windows, part of which involves the fact there are NO Windows, just one or two running applications on screen at a time. For developers, the good news with Windows 8 is that you can also get to the desktop and use all of the applications you already use on Windows 7.

To make all of this fluid, swipey goodness, Microsoft has introduced a new programming API called WinRT, which stands for Windows Runtime. WinRT is to Win32 what Silverlight or Windows Phone 7 are to the full .NET Framework, a smaller API surface optimized for their respective platforms. However, it is different in a couple of ways. First, it introduces new areas to the core Windows API, most of which are focused on using Windows for things like storage and search. Second, Microsoft is providing [or projecting] the WinRT APIs for direct use by C#, C++, VB.NET and JavaScript (and possibly F#), so instead of calling .NET framework libraries that in turn call Win32 APIs, the .NET code directly executes WinRT calls, similar to existing COM interop and P/Invoke technologies. The difference is that the projections include rich metadata so that the libraries appear as 'native' class libraries in each of their respective languages, avoiding a lot of the headaches of existing COM and P/Invoke interactions.

The diagram below outlines the various options for creating applications on Windows 8.

Win8screen2

The 'Desktop Apps' section of the diagram is the same types of applications that we currently know and love (or love to hate). These types of applications will continue to be supported and extended moving forward, but WILL NOT be able to interact directly with Metro apps, nor participate in the Windows 8 contracts that provide the rich 'web of applications' that are one of Windows 8's signature features. These applications will also not be able to be installed through the new Windows Store (think the App Store, but for Windows). Desktop applications will be linked through the store, but are not subject to the same certification and safety guarantees as Metro apps.

Similar to how C#, VB.NET, F#, and a host of other languages can create applications using the .NET Framework APIs, there are several options for creating WinRT applications. The options can be split into three different groups. The first group is C/C++ applications using either DirectX or XAML based UI technologies. DirectX is primarily used for game creation or complex imaging applications, and XAML based UIs are really Microsoft's replacement for their existing MFC framework. The second group is a Metro equivalent to WPF applications, written in either C# or VB.NET. The final group is the newly introduced/repurposed HTML/CSS/JavaScript stack, which allows the creation and packing of applications Windows 8 Metro applications using HTML/CSS as the UI layer, and JavaScript as the interface. An entire article could be written on what the HTML/JS layers represent and how they are different than 'web apps', but these types of applications are not executed 'in browser', they are fully fledged 'Metro' apps, using IE's JavaScript engine (Chakra) as the runtime interpreter. To be clear, there is NO fundamental difference in the end result for 'Metro' apps, regardless of what technology stack you choose to use, they really are just options that allow you to use your existing skillset to build Win8 Metro applications.

Quick Hits

Here are some quick bullet points for takeaway...

Microsoft got its C++ love back -There was quite a lot of time and energy from Microsoft put into the development tools for C++. One of the sessions even stated "C++ is back because performance matters". If you are looking to create uber-optimized WinRT apps on Windows 8, C++ may be the best option. If you are looking to get a date or see your family grow up, the .NET stack is still going to be the best way to create Line of Business applications (LOB). Also, WinRT applications run great with C#/VB/JS languages!

All Services All the Time -The data story for WinRT is going to be REST/JSON services. As of now, there is no way to run something like an Entity Framework model on the Metro UI. There are some rumors of SQL Lite support, but the hard push is for connected apps that require backend data sources that are NOT LOCAL to the machine (or even network) in question.

Metro UI on other processors -Microsoft is looking to have folks create many different devices and form factors using Windows 8. A lot of these will run on ARM processors, which are the low energy, middling performance chips that power things like iPads and mobile phones. For classic non-.NET desktop applications to run on these processors they will need to be recompiled. It is worth noting that there are LOTS of confusing statements about this, but as of now, that is the current understanding. Currently there is, at least, a subset of the .NET framework (the Windows Phone runtime) that runs on ARM, so it seems like good .NET framework support should be possible, even on ARM.

Visual Studio 2011 -Microsoft has a new version of Visual Studio 2011 that supports templates for many of the WinRT application types

Asynchronous data access -Microsoft has a new async/await keywords that are being introduced with the .NET Framework 4.5. These keywords allow a call to be made on a different thread. This becomes VITALLY important for performant applications because the thread that runs the UI has to wait for data to come back. Microsoft states that any call that takes longer than 50 (or 15, both have been mentioned) milliseconds should be asynchronous. Get used to coding a lot of async calls in the future! The good news is that the new keywords and compiler support mean that writing Metro (and .NET 4.5) applications will look a lot like standard synchronous code that 'just works'.

Promises -JavaScript programming on the WinRT stack is going to be implementing the idea of promises. This is the JavaScript version of async/await. Essentially, have JavaScript go get some data, promise data comes back and there is a then() function (or continuation) which will run after your data returns.

Windows Store -Microsoft is introducing a Windows Store for users to go and download applications and easily install them on their computer. This will be for WinRT applications only! Other .NET/Win32 applications may exist in the store, but they will link to external sites for purchase and install.

Conclusion So, what does it all mean? At the end of day, at least for now, not a whole lot! In all seriousness, Microsoft is probably a year away from releasing Windows 8 and clients will be at least 6 months to a year out from installing and asking for it. But, be sure to be ready when they start asking!

Having said that, Windows 8 represents a HUGE opportunity! According to Microsoft there are soon to be over 500 million copies of Windows in use. That is more than all the other mobile platforms combined. If there is one thing you want to do today to get ready for Windows 8, I would recommend this... Get your HTML 5/XAML skills up to speed and learn to love creating data services that can be consumed on mobile platforms.


 

John Ptacek I'm John Ptacek, a software developer for Skyline Technologies. This blog is my contains my content and opinionss, which are not those of my employer.

Currently, I am reading Norse Mythology by Neil Gaiman

@jptacekGitHubLinkedInStack OverflowGoogle+