shivank.arya

    4 Posts

    HTML5 has introduced some really cool Markups like Audio, Video, Canvas, Progress, etc. The complete list of new HTML5 markups can be found at w3schools. These new UI markups are no doubt very helpful and have made programmer's life much easier. But they can only be used in specific web applications. For example Audio/Video markups are useful in applications which provide such kind of content.

     

    In this blog, I am going to cover some NON-UI features of HTML5 which can be used in almost all web applications. I am going to cover only the basics to provide an overview and help you get started. The code examples for each of them shall be covered in future blog posts.

     

    Remember,

     

    Markup + JavaScript APIs + CSS = HTML5

     

    Here is the list of some cool Non-UI HTML5 features which can find space in almost all web applications (ofcourse, based on requirement).

     

    • Cookies are bitter!

    CACHING application data is fundamental in nearly all applications, web or desktop.

    Up until now, storing data in a web application required you either to store it on the server side and create some linking key between the client and the server—or it would be stored in cookies. The first approach has an unnecessary and undesirable performance impact. And cookies just suck when it comes to caching because they are overly complicated to use and their lifecycle has to be handled with workarounds. 

     

    HTML-5 has introduced new sophisticated web storage mechanisms - sessionStorage and localStorage.

    SessionStorage -

    Data cached using sessionstorage has a lifetime of a session. This means that it is available only for the current open window till it is closed. If you opened another window on the same domain, it wouldn't have access to that session data.

    LocalStorage

    It is based around the domain and spans all windows that are open on that domain. If you set some data on local storage it immediately becomes available on any other window on the same domain, but also remains available until it is explicitly deleted either by you as the web author or by the user. Otherwise, you can close your browser, reboot your machine, come back to it days later, and the data will still be there.

     

    Persistent data without the hassle of cookies: having to reset the expiry again and again. More on this can be read in my another blog.


    • Multi-threading with Web Workers
      JavaScript has been a single-threaded language. This means that it does one thing at a time. In one of the ways, this has been a good thing about JavaScript because it makes programming much simpler where we know in what will be the sequence of execution. The problem is that there are times where JavaScript has too much to handle impacting the performance and we get dialogs like "Slow Script".

      Web Workers solve this problem. This feature allows us to create another thread for processing something separately in parallel with the main JavaScript thread.

      There are some restrictions on using Web Workers to make sure that integrity of the DOM structure is maintained. And this absolutely makes sense. Like
      • Each Web Worker is defined in it's own JavaScript file that contains all the code required to do the job.
      • They do not have access the DOM or any of the variables and functions of the main code.
      • Web Worker communicates with the main thread via messages.

    • Make your application available offline
      HTML5 now allows you to make available your application content/pages even when the client (like tablet, smartphone) has gone offline. Isn't that Awesome?

      For this to work, you need to create a manifest file containing list of all the resources (html, js, css, images) that your application needs. On finding this manifest in the <html> tag, browser will download all these resources into the local system and switch to these local resources if and when your device goes offline.

    • With Web Sockets, no more server polling to check for updates.
      Haven't we all faced this problem - We want to regularly check if there are updates (or status change) on the server to start any action on the browser. For example, in a browser based chat application, we want to keep check which all my friends have come online or have gone offline.

      Web Sockets allows us to keep an open connection with a service on the server so that any time a new data is available on the service can be send to the client. It's like an open tunnel.

     

     

    I hope this helps in getting a little excited about HTML5. I am!

    SAPUI5 is a JavaScript based UI development toolkit for HTML5. SAPUI5 version 1.4.0 is a release now usable for external shipments. I recently got a chance to play around with it a little. Here are my quick take away's.

     

    • Built on the strong foundation of JQuery (JQuery 1.7.1)
      • JQuery is the most popular (and IMO, the strongest) JavaScript toolkit today. It offers great, yet simplified features for DOM traversing, event handling, Ajax interactions, etc.
    • Cool collection of UI Widgets
      • In my opinion, JQuery lagged in it's offerings of inbuilt UI Widgets. Today JQuery has UI Widgets like Accordion, Autocomplete, Button, Datepicker, Dialog, Progress bar, Slider, Tabs (and I think, that's it).
      • Apart from these SAPUI5 offers a rich collection of UI Widgets like - Form Fields, Menu, Message Box, Paginator, Rich Tooltip, Search Field, Roadmap, Tree,... This list just goes on and on.
    • Extensible - Being a pure JavaScript toolkit allows us to -
      • Include your own JavaScript, HTML and CSS in UI5 pages
      • Include other JavaScript libraries
      • Create composite controls from existing UI5 controls
      • Custom Controls from scratch
    • SAP Product Standards compliant
    • Write once, run everywhere (in supported browsers) - Cross browser support
      • We don't have to write browser specific code which has been a major problem till some time back. SAPUI5 (+ JQuery) handles all these problems internally providing us really simple and neat wrapper APIs.
    • Zero footprint - No browser plug-ins required
      • Being a pure JavaScript toolkit, SAPUI5 will run on all browsers and in all devices (including mobile) that have browsers without requiring
    • HTML5
      • Uses a lot of CSS3 features
      • Web storage for personalization of tables
    • IDE Support - Eclipse
      • Application development tools in Eclipse
      • Custom Control development tools in Eclipse
    • Others (which I couldn't test yet)
      • OData Support
      • UI5 Theming
      • Localization
      • Resource Handler

     

    Picture1.jpg

     

    Getting Started? - http://www.sdn.sap.com/irj/sdn/index?rid=/webcontent/uuid/20a34ae7-762d-2f10-c994-db2e898d5f70

     

    Outlook provides an easy and quick option to collaborate in a global team in terms of sharing forthcoming vacation/leaves with each other via 'Shared Calendars'.

     

    You can create a new calendar and share it amongst the team members. Once shared, everyone gets the same instance of the calendar and any changes made in the calendar by any team member will instantly get reflected to all.

     

    You can assign different privileges on the caldendar to the team members but the easiest is just allow everyone to edit it.

     

    Here are the steps to use it -

      Create a new calendar (Outlook --> Calendar --> Open Calendar --> Create New Blank Calendar --> 'Name: <Project_Name> Leaves Calendar')
      Share it with your team members across globe (Right click on calendar --> Share --> Share Calendar)
      Select the dates and mark them as vacation (all day event). And all your team members can see it. (Select date --> New All day event --> Add your vacation in format <Name>:Vacation to distinctly identify them on calendar)

         

        Thats it. Easy huh? !https://community.wdf.sap.corp/sbs/4.0.17/images/emoticons/happy.gif|height=16|alt=|width=16|src=https://community.wdf.sap.corp/sbs/4.0.17/images/emoticons/happy.gif!

         

         

        You can even merge this calendar with the main calendar (by clicking arrow next to leaves calendar caption). In that case, you will see the leaves of your team mates as part of your main calendar itself.

         

        Good luck. Feedback/Suggestions are welcome.

        HTML 5 Web Storage

        CACHING application data is fundamental in nearly all applications, web or desktop.

        Up until now, storing data in a web application required you either to store it on the server side and create some linking key between the client and the server—or it would be stored in cookies. The first approach has an unnecessary and undesirable performance impact. And cookies just suck when it comes to caching because they are overly complicated to use and their lifecycle has to be handled with workarounds. 

         

        Please welcome HTML-5 web storage mechanisms to the rescue - sessionStorage and localStorage. Web Storage—supported in all the latest browsers. 

        SessionStorage

        Data cached using sessionstorage has a lifetime of a session. This means that it is available only for the current open window till it is closed. If you opened another window on the same domain, it wouldn’t have access to that session data. This is useful to keep a shopping session within one window, whereas cookies would let the session "leak" from one window to another.

        LocalStorage

        It is based around the domain and spans all windows that are open on that domain. If you set some data on local storage it immediately becomes available on any other window on the same domain, but also remains available until it is explicitly deleted either by you as the web author or by the user. Otherwise, you can close your browser, reboot your machine, come back to it days later, and the data will still be there. Persistent data without the hassle of cookies: having to reset the expiry again and again.

        Code Examples for SessionStorage -

        Setting data
        Strings - window.sessionStorage.setItem("name", "Shivank Arya");
        Objects - window.sessionStorage.setItem("graphs", JSON.stringify(allGraphs));

        Note - Browsers convert objects to string before caching. So, if we try to directly save the object, it will actually save "[Object object]" 
        Accessing data
        Strings - window.sessionStorage.getItem("name");
        Objects - JSON.parse(window.sessionStorage.getItem("graphs"));
        Removing data
        window.sessionStorage.removeItem("name");
        window.sessionStorage.clear();
        Checking if your browser supports web storage
        if(window.sessionStorage){
            data = window.sessionStorage.getItem(path);}

        Note: LocalStorage has similar APIs for managing web storage.

         

        Good luck.