1
2
3
4
IT'S ALIVE!
Our WebApps update changes in real-time, not on refresh!
17
Dec 2016
What's this 'Live' all About then?
John Ince
What's this 'Live' all About then?
Why do you call your WebApps 'live' and not just webapps like everyone else? Simply because they are nothing like a stock WebApp that runs in a browser. Our WebApps update changes in real time, not on refresh!
What's a Traditional WebApp?
The general distinction between an interactive website of any kind and a 'webapp (web application)' is pretty unclear. We tend to define a WebApp as behaving more like a traditionally installed app on the desktop than the usual noticeable page movement associated with a website. Usually WebApps achieve this concept by being 'single page' in design. This means that all the web pages for the whole WebApp are downloaded in a single initial request. This gives the smooth, none web like, movement between the pages. It feels fast and natural without the lag associated with traditional web server roundtrips to the next page. It's simply more app like, less website like. An application will need a programming language to create interaction with the user, so most WebApps use JS (JavaScript) to implement the movement, user experience, business logic and possibly some AJAX (under the radar calls to the web server). That's all you need really to build a web application and host it in a browser. The big advantage is that there is zero install, just like a website which make distribution and updating really easy. As far as the downside goes, we need a modern browser for it to work well, we're limited to the power of JavaScript for raw application crunching power and there's no direct access to the hardware/operating system of the machine (we're safe in a browser sandbox).
What's a Live WebApp?
We like, in general, the WebApp paradigm. We did however feel like we wanted to extend it much further and to go beyond those limits that we touched on above in the downsides. We thought wouldn't it be cool to build our own controls, forms and pages just like you find in a native app on Microsoft Windows or an Apple Mac but instead of it being part of the operating system they would just be HTML/CSS/JS controls that work in a browser. We felt the feel of the native browser controls were somewhat lacking. Consider a stock HTML form for a moment, erm yes, that's what we thought. Actually making the form controls more visually appealing is only a tiny part of it, the major part is the 'live' aspect that we've not yet touched on. In our world to call a WebApp 'live' it has to be fully multi-user. So what's this multi-user business? What if two users, different browsers/locations are editing the same data, same form, same control? Would you know? What would happen? In most scenarios you'd probably end up overwriting each others changes. In our 'live' model you would know and see other users edits in realtime. You see the remote user in the control and what they are typing live. This is a big enabler for remote working and more specifically remote collaborative working. Users can swarm around our forms updating concurrently. So that was the main motivator behind our own UI (User Interface), to be natively multi-user and collaborate. So, now the big question. How do we know if another user is changing data? A WebApp is just JS and runs in a browser and the other users are in other browsers, devices and physical locations. Here's the key, our WebApps DON'T run in the browser it's only our UX (User Experience). The forms/controls are in browser BUT the actual application logic and code is in the cloud, on the server outside the browser. This gives us a BIG advantage. All our browser users are in the same room, in one running application, we know what they are doing, what data they are changing and we can push the updates live as the data changes in real-time. At the very lowest level we use a technology called HTML5 websockets to achieve this. It gives us the ability to have a permenant two-way connection to the cloud webapp and each connected browser/user. So that's our game changing concept of 'live'. If a user changes some data then all viewing users are updated wth the new data without refresh. We call these connections 'Smart Connections', it's their responsibility to keep track of interested browsers and only deliver specifically targeted data.
Tell Me More about these 'Smart Connections'
By itself a websocket is pretty dumb. It's simply a two way street to pass data between a user's browser and a web server. It's big selling point is that the connection if permanent, unlike the normal HTTP make and break requests. The server can thus 'push' data back to the browser without the client requesting it. This is a big advantage and we can build on top of it. Our smart connections maintain the 'state' of a user, what they are doing in our WebApp and more importantly what is on their screen that could potentially be affected by other user's actions. For example if another user buys an item they are looking at and it's now out of stock, let them know live. If an admin changes a price and a user is looking at it, let them know live. Remember the point here is that this is targeted data, if no one is looking then zero messages are sent. It's very efficient. Imagine the reduction in data bandwidth, server processing and energy using this concept. There's quite a bit more too, like our enhanced security, smart reconnects and dumb connection fallback but we'll save that for another time.
So How do we See this Work in Real Life
If you've followed the links on our Project Peach WebApp then you've only seen half the story. If you've popped over to our client's live retail WebApps you've probably thought, nice website but how's it alive. If you were really lucky you might have seen the weather change on Project Peach laptop or an admin user add a new product or seen a live sold update. But chances are you'd miss it. So how can you see this 'live' for yourself. You could of course simply sit and watch for a couple of hours or we can give you a free at your desk demo. Remember though that in our world you're going to need more than one browser open to see what we are talking about and maybe crack open your mobile phone too. Here's what we would show you in a live demo. To start, we open two browsers on the desktop and park them side by side (we could open two tabs but we'd have to keep switching). In one browser we login as the admin user and then the fun begin. We move to the same product in both browsers and as admin change the price, set stock control on and set to 1 available, pop it in basket and check the other browser. It's marked as sold. You get the idea. It all happens live. We right-click some text, edit and save, see it update live. With two admin logins you're in for a treat. We can edit the same product together. It just works, the interactive, live, remote collaborative software of the future.
The Fake 'Live' Website of Today
Four people in a house two upstairs and two downstairs all expecting a visitor, there is no way of knowing when there is somewhere at the door so all four get up every 15 minutes to go to the door just to check, all of them at the same time bumping into each other slowing the journey time to the door down and making it very stressful and slow. All for no point as there was never anyone at the door in the first place. Wait 15 minutes and repeat for the rest of time - this is actually how the current fake 'live' Internet works! believe it or not!
Same House, Same People but in 'Live WebApp' World
All four people sit down and have a snooze, in-between sipping their favourite drinks. Somebody arrives at the door. If there was a door bell everyone would get up and run to the door wasting energy causing congestion, but its only for one person. So, Project Peach has created the internet concierge (who also knows Kung Fu - for security you understand) and now when someone turns up at the door they are vetted and then escorted to the person they want without disturbing anyone else with no wasted energy in useless round trips. And as you have had your feet up all day not going back and forth to the door you are fresh and full of energy to do what is needed when they arrive and the corridors are empty for you to do it. That's what we have done! Removed all un-necessary traffic so its easier to move. Made it so we have to move shorter distances. Made it so we have to move less data. Made it so the data only goes where it needs to go and not just shot out everywhere hoping it sticks where needed.
We've only scratched the surface here. Imagine you ever changing business data providing realtime website content. Your website, always different on every visit and more inportantly during your visit. It's the future!
Comments
PROJECT PEACH
Doing it differently since 2012. We're simply 10 years ahead. Our software is designed, coded, maintained, supported & hosted in the United Kingdom.
READING
Blogs
Newfeed
PORTFOLIO
DBD International
The Hawthorn Gallery
ScriptTrack
Knot 2b Missed
Overview
Monero Mine
COMPANY
Home
About Us
Contact Us
Pricing
Pay Us
Copyright 2018 Project Peach