The Murky World of Hybrid Web Apps
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 133 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/48858 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
NDC London 201646 / 133
2
6
10
12
15
17
23
24
28
30
31
32
35
36
39
40
43
44
45
47
51
52
55
58
59
60
61
62
63
64
67
69
71
73
74
75
82
84
86
87
97
103
107
108
111
112
114
115
117
120
123
126
128
129
132
133
00:00
Mobile appSoftware developerOpen setMobile appWeb applicationWeb 2.0WindowMultiplication signFront and back endsData storage deviceWeb-DesignerView (database)outputSoftware developerDifferent (Kate Ryan album)BuildingComputer configurationFormal languageHand fanProcess (computing)Ultraviolet photoelectron spectroscopyAndroid (robot)WebsiteSelf-organizationComputer animationXML
02:06
Software developerMobile appFormal languageWeb 2.0Computer programming40 (number)Programming languageWebsiteMeeting/Interview
02:49
Software developerProduct (business)Computing platformStructural loadWebsiteIntegrated development environmentOperating systemForm (programming)Data storage deviceMobile appFormal languageAreaTerm (mathematics)SubsetJava appletMeeting/Interview
03:34
Software developerMobile appBuildingPartial derivativeMobile appTerm (mathematics)AreaNP-hardRange (statistics)Propositional formulaProper mapPoint (geometry)BitExtension (kinesiology)Computer configurationDifferent (Kate Ryan album)Software developerMultiplication signSheaf (mathematics)Decision theoryScripting languageGoodness of fitUltraviolet photoelectron spectroscopyFormal languagePhysical systemAuthorizationStrategy gameDigital photographyData storage deviceJava appletMeeting/InterviewComputer animation
05:24
Strategy gameMobile appSoftware developerComputing platformLatent heatState diagramElement (mathematics)WebsiteMaxima and minimaInstallation artCompilation albumCASE <Informatik>ExistenceParity (mathematics)SerializabilityMobile appWeb applicationWindowCASE <Informatik>Decision theoryComputing platformData storage devicePoint (geometry)Cartesian coordinate systemSingle-precision floating-point formatType theoryWeb 2.0Multiplication signSoftware developerCodeQuicksortParity (mathematics)Server (computing)Set (mathematics)Matrix (mathematics)Latent heatReading (process)CurveTable (information)Installation artTerm (mathematics)Streaming mediaFormal languageMedical imagingGoodness of fitLine (geometry)Physical systemStrategy gameWeb-DesignerUltraviolet photoelectron spectroscopyComputer iconExecution unitWebsiteWeb browserField (computer science)Point cloudSource codeINTEGRALDataflowProcess (computing)System callRegular graphXML
09:19
Software developerMobile appDecision theoryType theoryBitMobile appComputing platformWindowFacebookDifferent (Kate Ryan album)TouchscreenComputer iconWebsiteWeb 2.0CASE <Informatik>Dependent and independent variablesDressing (medical)Cellular automatonComputer animationMeeting/InterviewJSONXML
11:30
Software developerPrice indexMessage passingWindowTesselationWeb 2.0TouchscreenDressing (medical)FacebookMobile appThread (computing)Computer iconInstallation artComa BerenicesWebsiteContext awarenessResultantComputer animation
12:34
Software developerComputer iconTesselationWindowMobile appBitInformationWebsiteDependent and independent variablesTouchscreenWeb 2.0QuicksortCartesian coordinate systemComputer animation
13:19
Software developerSpring (hydrology)PlastikkarteQuicksortWeb serviceWebsiteRight angleSimilarity (geometry)Mobile appFunctional (mathematics)Database transactionVirtual machineWindowDifferent (Kate Ryan album)Data storage deviceMultiplication signComputer animation
14:06
Software developerMobile appMultiplication signBit rateData storage deviceSoftware developerBitWindowAverageComputer animation
14:46
Bit rateRevision controlPiSoftware developerBit ratePoint (geometry)Mobile appMultiplication signWeb applicationWeb 2.0Data storage deviceGraphical user interfaceCartesian coordinate systemCASE <Informatik>Computer animation
15:34
Multiplication signSoftware developerMilitary operationMathematicsCartesian coordinate systemWeb 2.0TouchscreenWeb applicationMenu (computing)Graphical user interfaceCache (computing)Touch typingMobile appComputer animationSource code
16:26
Software developerRow (database)Coma BerenicesSheaf (mathematics)Logic gateContent (media)BitMobile appWeb 2.0InternetworkingSet (mathematics)WebsitePhysical system2 (number)Computer animationSource code
17:14
Mobile appSoftware developerTotal S.A.Asynchronous Transfer ModeoutputSoftware maintenanceData modelComputing platformDecision theoryConsistencyContent (media)BuildingStrategy gameElement (mathematics)Server (computing)Cross-site scriptingJava appletScripting languageStack (abstract data type)CodeDisintegrationWorld Wide Web ConsortiumMetropolitan area networkManifoldOpen sourceComa BerenicesRevision controlRadio-frequency identificationMobile appTouchscreenCodeComputer iconWebsiteDivisorLevel (video gaming)Open sourceData storage deviceWindowTesselationMetadataMultiplication signPlug-in (computing)Protein foldingWeb 2.0Operating systemBridging (networking)outputServer (computing)Computer fileWorld Wide Web ConsortiumStack (abstract data type)Different (Kate Ryan album)Web applicationView (database)Projective planeWeb browserGraphical user interfaceSoftware developerManifoldComputing platformConfiguration spaceDecision theoryRevision controlOrientation (vector space)RoboticsContent (media)Medical imagingApplication service providerGraph coloringUniform resource locatorINTEGRALQuicksortSlide ruleStandard deviationAndroid (robot)Point (geometry)Web serviceLatent heatToken ringPhysical systemStaff (military)Insertion lossMaxima and minima2 (number)Archaeological field surveySource codeCore dumpGame controllerScripting languageCASE <Informatik>Type theorySpeech synthesisBuildingAxiom of choiceElectronic visual displayPopulation densityBus (computing)Coma BerenicesDegree (graph theory)Mathematical analysisRight angleConnected spaceDescriptive statisticsIterationCartesian coordinate systemJSONXMLUMLMeeting/InterviewComputer animation
23:05
Software developerMach's principleRight angleWorld Wide Web ConsortiumMathematical analysisSet (mathematics)BitVirtual machinePosition operatorWordProjective planeMobile appWebsiteManifoldComputing platformJSONXML
23:53
ManifoldSoftware developerExecution unitPredictabilityWebsiteManifoldCore dumpCASE <Informatik>Computer iconOnline helpSet (mathematics)Demo (music)WebcamMedical imagingWeb 2.0BitJSONXMLComputer animation
24:57
Software developerComputer iconINTEGRALBitTouchscreenComputing platformMobile appWebcamMereologyWaveMultiplication signCellular automatonManifoldStructural loadLecture/ConferenceSource code
25:44
Software developerCore dumpDemo (music)Local ringSoftware developerWeb browserProjective planeComputing platformWindowAndroid (robot)outputBoundary value problemMobile appComputer fileMetadataMultiplication signBitQuicksortComputer iconWebsiteWeb pageCodeFormal languageData storage deviceWeb 2.0MereologyShared memorySampling (statistics)Point (geometry)Exception handlingComputer animation
27:30
Software developerWorld Wide Web ConsortiumView (database)MassServer (computing)Cross-site scriptingJava appletScripting languageTouchscreenMobile appComputer iconWindowWebsiteManifoldCodeExpected valueMenu (computing)PurchasingMultiplication signWeb pageScripting languageWeb 2.0Latent heatLine (geometry)Right angleWeb browserRevision controlJava appletText editorType theoryFreewareINTEGRALSurfaceTesselationCASE <Informatik>Library (computing)Process (computing)Forcing (mathematics)Data managementMessage passingSingle-precision floating-point formatMedical imagingFormal languageRange (statistics)Goodness of fit2 (number)State of matterProjective planeVisualization (computer graphics)LaptopComputing platformBitComputer configurationServer (computing)View (database)Application service providerMetadataOpen setCross-platformWeb applicationWritingLocal ringComputer animation
31:21
Software developerNormed vector spaceRule of inferenceInclusion mapContent (media)Visual systemMobile appContent (media)Uniform resource locatorCodeWebsiteWeb browserElectronic mailing listWindowDifferent (Kate Ryan album)Software frameworkSpacetimeEntropie <Informationstheorie>
32:08
Software developerCodeWindowMessage passingType theoryWebsiteMobile appPersonal identification numberState of matterTesselationCASE <Informatik>Software framework
32:54
Software developerTesselationPersonal identification numberMultiplication signInformationWindowWeb 2.0Process (computing)CodeBitConditional-access moduleMobile appRegular graphUniverse (mathematics)Spherical capSystem callSampling (statistics)Cycle (graph theory)PlanningCASE <Informatik>WebsiteComputer animation
34:00
Software developerMaxima and minimaSampling (statistics)WebsiteCodeReal-time operating systemMobile appWindowScaling (geometry)Reading (process)Moment (mathematics)Computer animationSource code
34:39
Software developerWebsiteDefault (computer science)2 (number)Web pageMobile appUniform resource locatorComputer animation
35:18
Software developerCodeMedical imagingMobile appComputer clusterWebsiteJava appletScripting languageComa BerenicesSystem callCodeZoom lensDoubling the cubeWindowLocal ringMotion captureComputer animation
35:59
Software developerPoint (geometry)WebcamTesselationWindowGroup actionMobile appComputer animation
36:49
Software developerOffice suiteSurfaceAreaEmailContent (media)Message passingWordOffice packageCross-site scriptingJava appletScripting languageFunctional (mathematics)Military baseAreaLie groupContent (media)Interactive televisionPhysical systemWeb 2.0Right angleFrame problemOffice suiteSurfaceWeb applicationSoftware developerData storage deviceWebsiteMobile appDisk read-and-write headPoint (geometry)Boss CorporationAndroid (robot)Term (mathematics)CuboidServer (computing)Atomic numberWindowSoftwareComputer architectureSystem callGoodness of fitComputer fileLibrary (computing)Key (cryptography)BuildingPlug-in (computing)Web serviceComputer animation
38:36
Software developerTask (computing)Content (media)EmailOffice suiteProjective planeClosed setWordType theoryWebsiteCartesian coordinate systemPlug-in (computing)Visualization (computer graphics)Task (computing)Web applicationFluid staticsLocal ringWeb 2.0Computer animation
39:22
Software developerOffice suiteContext awarenessWeb 2.0Office suiteUniform resource locatorWebsiteScripting languageData storage deviceRegular graphWordProcess (computing)Library (computing)Revision controlComputer fileMobile appCodeComputer animationSource code
40:15
WordSoftware developerStructural loadType theoryMobile appWeb 2.0Content (media)Interactive televisionWeb applicationWordMobile WebComputer fileMetadataBit rateLink (knot theory)VideoconferencingTranslation (relic)RandomizationOffice suiteRoundness (object)Frame problemCategory of beingTrailPoint cloudComputer animationSource code
41:33
Software developerChi-squared distributionRevision controlReading (process)CodePredicate (grammar)Cartesian coordinate systemCausalityFormal languageLine (geometry)Web applicationOffice suiteContent (media)Insertion lossInteractive televisionMobile appSource codeUniform resource locatorComputer fileStructural loadWebsiteSheaf (mathematics)Computer animationSource code
42:22
Software developerSlide ruleMereologyMultiplication signVideo gameStructural loadWeb applicationComputing platformOffice suiteType theoryoutputRight angleBitWindowWebsiteProcess (computing)Computer animation
43:20
Software developerComputing platformMountain passMobile appStrategy gameElement (mathematics)Cross-site scriptingFormal languageVisual systemFibonacci numberAndroid (robot)BuildingIntrusion detection systemEmulatorSoftware frameworkWeb pageInheritance (object-oriented programming)Price indexData storage deviceDisintegrationManifoldWorld Wide Web ConsortiumRevision controlOffice suiteMobile appoutputData storage deviceMathematical analysisComputer fileBitCartesian coordinate systemCASE <Informatik>Content (media)CodeTerm (mathematics)WindowComputing platformDifferent (Kate Ryan album)Structural loadRule of inferenceSoftware frameworkSoftware developerBootstrap aggregatingBlogWeb 2.0VideoconferencingLink (knot theory)Local ringAndroid (robot)Web browserWebsiteGoodness of fitVisualization (computer graphics)EmulatorCache (computing)Computer iconPosition operatorElectronic mailing listBuildingDecision theoryTraffic reportingINTEGRALWorld Wide Web ConsortiumWeb applicationGoogolKey (cryptography)Formal languageHypermediaSpacetimeJava appletTouchscreenManifoldMultiplication signBridging (networking)Machine codeCross-platformProjective planeWritingShift operatorWebcamFrame problemScripting languagePoint (geometry)Server (computing)Process (computing)Matching (graph theory)Machine visionPresentation of a groupSlide ruleFamilyRight angleSubject indexingDependent and independent variablesStaff (military)MereologyOnline helpWeb pageWorkstation <Musikinstrument>WordSpherical capAxiom of choiceConnectivity (graph theory)
50:29
Software developerCuboidBit rateGreen's functionGraph coloringFairness <Informatik>Dressing (medical)Computer animation
Transcript: English(auto-generated)
00:05
Thank you again for coming and I know it's early. I've only got a pleased 12 people to get the best rated session at NDC, the way it's going. So that's good news for me. So my name's Martin, I'm an evangelist at Microsoft. I'm gonna talk today about the murky world of hybrid apps.
00:22
So hybrid apps is a technology or an idea that's been around for a while and lots of different views on it. Some people love it, some people hate it. I'm quite a fan, I've got a web development background so I spend my days talking about web development, writing websites, writing web applications. So the idea of using those skills and technologies
00:41
and having them exposed to app stores is quite appealing to me. I worked with River Island about a year or so ago on an app. At the time, we were trying to get people to build apps for Windows and try and get a piece of published apps into the Windows store. And River Island, they've got an iOS app, they've got an Android app
01:00
and they weren't particularly keen on doing a Windows app or certainly not doing a fully native Windows app and spending all the time and money to do that. So we said to them that at the time, they were doing a new redesign on their website. So we said to them, why don't we look to see if we can use that and make a hybrid app based on that? So they agreed and I went and spent kind of half a day with one of their front-end web devs
01:23
and we produced a Windows app in that time. So it took half a day, it went to store and it's actually been really successful. They've been really pleased with it. It's one of the best rated fashion apps in the store. So for some companies and some organizations, hybrid apps make a lot of sense. If you wanna have the reach of being across lots of stores but don't necessarily wanna invest the time and effort to build a fully native app,
01:42
it can represent a lot of sense. But it's not without controversy. So some people, developers especially, especially native app developers, think hybrid apps are kind of inferior, they're not necessarily good things. So I interviewed a few people to kind of get their thoughts on hybrid apps and this is what they said.
02:04
Hybrid apps, what the hell are hybrid apps? Look, it really is simple. Sooner or later, the world is gonna wake up and realize that the only language for apps is JavaScript, web or not. Well, it doesn't involve learning anything new which is why it's great, I guess, and if it involves putting anything on the app store,
02:22
I would much prefer to use web technologies. So I'm for it, I guess. Hybrid apps, you probably don't wanna get me started on hybrid apps, they make me extremely angry. JavaScript is the Swiss army knife of programming languages. It's the only thing that is needed, period. What matters for me as a designer with hybrid apps
02:41
is that they are actually better, they're more beautiful than the website is. They're easier to use and they add something to the user experience. And the way we built the business has been building it around customer experience which is absolutely paramount to us. We've just spent millions redesigning and redeveloping our website that's available on a load of platforms.
03:03
And the key thing for us is to provide the best customer experience on those platforms to enable people to buy our product. I've spent years, years working on how to get an app to work perfectly in its chosen environment and its chosen operating system. I go to the stores these days, I think, great, there's a new app there.
03:20
Well, it's the bloody website. It's the website but it doesn't even work anymore. Even thinking about some of the other languages, those grotesque languages such as C sharp and Java makes me one, emotionally upset and two, physically nauseous. I can see that there may be some ROI and TCR advantage of hybrid apps in some areas in terms of partial reuse, et cetera.
03:42
But the key thing for us is the customer experience. And if hybrid apps can't give me that, I'm not interested. Couldn't care less. So there we go, a range of opinions there. We've got the businessman who's interested in TCO,
04:03
return on the investment. That represents kind of River Island to a certain extent. So that's a good proposition for those guys. He wants the reach of being in the stores but doesn't necessarily want to spend the money and time supporting a fully native app. You've got a native app developer who hates hybrid apps. He thinks they're inferior. If you're not gonna build a proper app,
04:22
don't bother at all. You've got the user who couldn't care less. As long as it works, it's good for him. Sometimes he doesn't even know it's a hybrid app. So lots of different opinions. You've got the JavaScript guy who thinks everything should be written in JavaScript. So I'm gonna talk through some of that stuff, some of the decision points around hybrid apps
04:40
and look at some tools for creating hybrid apps. So the main three sections of the talk is one around choosing hybrid. So when should you choose hybrid? When shouldn't you choose hybrid? What are some of the things to take into account when you're making that decision? Secondly, we're gonna spend a lot of time looking at building hybrid apps. So we've got some tools at Microsoft, and there's other people with tools as well
05:00
that actually help you build these apps. And I'll show you some of that, some really quite powerful tools. And then finally, we're gonna look at really making them fly. So really making hybrid apps awesome. Make it so users don't even know they're using a hybrid app. It's a really good experience for them. So what are the options around hybrid apps? Because sometimes it can be a little bit confusing.
05:21
There's lots of different ways to build an app. So which one do you choose? And there's really four main strategies. First one is native or packaged apps. So this is really about having an app that's fully developed for a specific operating system. It's developed in those native languages. It runs locally on the device. It uses best of breed technology.
05:40
So this is really like the ultimate app really. This is the app that most people think of when they hear the word app. It can maximize the platform capabilities. It's platform specific. But the problem is it's very expensive and very time-consuming to build these things. Next we have what I call native hybrid. So this is where, again, it's a native app. It runs locally on the device, but it uses web technology.
06:02
So it's written in HTML, JavaScript, CSS. Some people, this is hybrid apps to some people, but I think there's other types of hybrid apps as well. So I call this native hybrid. The benefit here is you can use web skills. So if you've got web developers, they should be able to build one of these apps relatively easily. It is still platform specific. It does run on the device.
06:20
So it does require a bit of a learning curve. You can use tools like Cordova to help you with this. Windows has some built-in capabilities around this as well. But the benefit here is you can be in the store. You can have a native app, but you can use your web skills and technologies to do that. The next one, and the one I'm gonna spend a lot of time talking about is what I call hosted hybrid. This is basically where you've got something
06:41
living on the web. It's on the web server in the cloud. It's running as a web application or website, and you're gonna take that and wrap it effectively in a native app. And it's not just a case of take a website, wrap it in a native app, and put it in the source. There's a lot more to it than that. There's some really powerful things you can do with these types of applications. But the point here is the code and the HTML
07:02
and the images and all the assets live on the web. They don't live in the app package, and the app just streams them in. Sometimes they're installable. Sometimes they can use native features. In the case of Windows, we can certainly use native features with these apps. The benefit here is you get the storage and you get to reuse your web investments. And then finally, we've got a good old web app.
07:21
A lot of people won't think this is an app at all, but I'll show you some examples of people that have developed pure web apps that are accessed through a browser. They're actually very, very good. They work offline. They're very compelling. Now across this, we've got this kind of matrix of kind of effort and cost versus quality and experience. So with native, it's very hard to do those.
07:40
It takes a lot of time and money, but you can get the best of read experience on the native app. With the web, it's relatively easy to do. A lot of people already have web applications. It's not to say that you can have a sort of, you can certainly have badly written native apps, so you can certainly have well-written web apps, but generally speaking, there's this compromise between quality and experience versus cost and effort across these.
08:03
So choosing a hybrid app's a big decision. It's certainly a decision you don't want to get wrong. You don't want to be like this guy. So the case for a hybrid is really you get to reuse a web app. You get feature parity. So one of the benefits that River Island had was that they implement features on their website first,
08:23
which meant that the Windows app was the most fully featured app because it was basically based on their website. So the minute they do something, it appears on the Windows app straight away. The other apps lag behind in terms of feature parity. So that's a really key thing there. You get a single skill set. So you get to reuse your existing web skills, a single development workflow as well.
08:41
So you get to, when you publish your website, your app gets automatically updated. A single store submission. So you submit the app once and then all of the other changes happen on the web. And you get all the benefits of being in the store. So you get the reach. So when people search in the store, they find your app. You get the stickiness of it being on people's devices,
09:00
icons on the home screen, platform integration, and the discoverability that's associated to that. In some cases, if it's a good app, you'll get promoted in the stores, you'll get into the league tables and all that kind of stuff because it's just a regular app. So that's a Liger, in case you're wondering.
09:29
What's a Liger? It's pretty much my favorite animal. It's like a lion and a tiger mixed, bred for its skills and magic.
09:40
She's obviously impressed, isn't she? You can't beat a bit of Napoleon Dynamite there. So when should you avoid hybrids? What are the things to think about when you shouldn't look at hybrids? Because you don't want to make a bad decision on this. You don't want to be upset with the decision. So if you've got your hybrid app, really, if the thing you put into it isn't very good,
10:02
the thing you get out of it isn't going to be very good either. That's basically the up and the all of the story. So start with a good website. What we're looking for here is a responsive website, one that's designed for touch, one that's fast, that's really important. It has to be really fast, and it can be really fast as well. And just avoid the kind of nastiness that you get on the web.
10:21
So avoid banners, pop-ups, adverts, those kinds of things. Just the typical web stuff that people will obviously identify with a website. Those things don't work as a hybrid app. So it's not just a case of take any old website and wrap it, and that's an app. You've got to pick a good website that's designed to be an app, or at least designed to be a good modern website.
10:43
And if you do that, you get happy users. And that's Bill Gates and Steve Ballmer doing a happy dance there, which is amazing, really. Dressed like the 80s as well. You can't go wrong with that. I'm just gonna enjoy that for a little bit until it gets awkward.
11:02
So let's have a look at some examples of some hybrid apps. So I'm running Windows 10 here, so a lot of these are gonna be Windows apps. Sorry about that, but that's just the way it is. But we have examples of hybrid apps across lots of different platforms. So I'll start off with Facebook Messenger. So this is an app I built. So I took Facebook's website, and I made an app out of it.
11:23
And just let me know what you think. So I start off, I've got an icon on my start screen here. It already starts to feel like an app. I can search Windows, and there it is. It says it's a Windows app. So that's the first indication. I've got a splash screen here so that it doesn't look like a website. Apologies for any messages that might appear.
11:41
I've deliberately chosen a thread between me and my plumber, because that's relatively safe. So hopefully nobody's gonna send me Facebook messages. There is at least one person in this room that I'm friends with on Facebook, so please don't sabotage that. So it expands and collapses. It feels like a pretty native app, right? It doesn't feel like we're using a website here, but we are using a website.
12:01
If you go to messenger.com, this is what you get. But in this context, without all of the kind of web navigation and all of the adverts and those kind of things, it feels like it's a native app. I've got an icon here in the bottom corner there so I can, for all intents and purposes, this is a native app. Although it's not.
12:21
It's a hybrid app based on their website. I've mentioned River Island. So I wouldn't normally have pictures of dresses on my start screen. This is not a typical setup for me, but that's what River Island do with their Live Tiles. So I have the River Island app installed. As you can see, it's got Live Tiles. So this is a feature. If you've got Windows,
12:40
you'll know what Live Tile's all about. It's kind of an iconic feature for Windows. Windows users expect their tiles to rotate with live information, and the River Island app does exactly that. So I can load that up again. We've got a splash screen. This app was actually built for Windows 8. So there are some things that are a little bit out of date. It could do with updating, to be honest, but it works pretty well. It's obviously a responsive website.
13:02
You'll see that there's no web nastiness here. They've taken out all of the kind of footers, all of the adverts, all of the navigation. The navigation happens by using the native Windows navigation. So I can right-click and get these drop-down menus. I can navigate here and look at various things that I might want to buy. I'm not really the ideal demographic for River Island.
13:21
I'm far too old and slightly overweight, and it's not the sort of thing that they don't really want to sell to me, so I don't generally buy anything. But this feels like a pretty decent experience, right? You can kind of tell it's a website, but it's fine. It works really well. It responds really well. I can have full transactions on this. There's no problem at all here. Now, if we compare that
13:40
to one of River Island's competitors, Zara. So these guys, similar kind of industry as River Island. They're a fashion retailer. This is a fully native app. So, and this was developed by Microsoft services. And you can see it does have a slightly better feel about it, but there's really not that much in it. The functionality's certainly the same across the two. The features are the same.
14:00
Actually, Zara doesn't have live tiles, and the River Island one does. So there's some differences there between the two. If we actually look at the Windows store and see how well, because these two apps were both launched at around the same kind of time. We can search for River Island clothing there. And we see this is doing pretty well in the store. This has an average rating of four across 81 reviews.
14:24
And generally speaking, the people are quite happy. The River Island customers are quite happy. You will get the odd developer that says, no, this is a website wrapper, don't use it. But generally speaking, people like this, it's 81 people have averaged four out of five for this, which is, that's pretty good.
14:40
That's probably a little bit above the average for Windows apps all up. If we look at the Zara app, it's pretty much exactly the same story. So they've got 3.9 across 36 ratings. So about the same kind of customer happiness, less people have used it. Now I can tell you that the River Island app was built in a few hours.
15:01
The Zara app was built in a few months, and it was built by Microsoft as well, which means it's expensive. So from a TCO point of view, where's the return on investment across those two? Who's had the best return on investment out of those two companies? The other thing I wanted to show you, I talked about just web apps and how web apps on their own can be really good.
15:21
And a company that really has been pioneering in this has been the Financial Times. So I'm using Chrome here because although they're pioneering, they haven't got edge support just yet. So I have to use Chrome. Hopefully they'll have that at some point soon. But they kind of withdrew from the native app stores a few months ago, and they have this wonderful web application, and it's been developed to be an application.
15:44
It's not really a website. It's very much a web application. If I do F11 to put this into full screen mode, oops, I'll just do that to put this in full screen. I'm swiping with touch here. I can go back and forth. I've got a menu there that feels like a native app menu.
16:01
And the best thing about this, so people always think that the thing with hybrid apps is offline. The web doesn't work offline, and that's just not true. So this app does work offline. So I've got a network cable here. I'm gonna unplug it. This device is now completely offline. I'm gonna close Chrome just so that it's not using any cache. You can see that we're offline here.
16:23
I'll even go to something in Edge just to prove it. Let's go to Bing. The device is completely offline. I'm gonna go to Chrome again and go app.fd.com. And it's there. All the content's still there. I can still navigate around.
16:41
I can still read the, I'm not a subscriber, so I can't actually read the articles. But if I was a subscriber, I could. I can go to all of the different sections. This is all just working offline. It's the perfect offline experience from a website. So this isn't even a hybrid app. This is just a pure website. And they've done some engineering to make sure that it works offline. I'll talk a little bit about
17:01
how they've done that later on, but offline isn't a problem with the web. It's slightly harder than it is with native apps, but you can definitely make the web work offline. I will need the internet for the rest of the talk, so I'm gonna put it back in there. So just a few examples there of hybrid apps. So how do you decide? You don't wanna be like Ron Burgundy here.
17:24
We go into the bear pit. They regret this decision.
17:41
You definitely don't wanna be like that, especially not in the bear pit. There's lots of factors that you need to take into account. If you're thinking about hybrids, then I guess you are, because you're at this talk. These are just some of the things. I'm not gonna go through all of this in detail, but just to pick out a few, is offline important? We've just seen you can do offline in the web, but it's difficult. It's hard to do compared to native apps.
18:00
You have to do a lot of engineering to make that happen. What do you care about TCO? Most people do, but how big of a thing is that? Do you care about things like UX conventions? So one of the things with hybrid apps is you can't really adopt platform-specific conventions unless you build an app for each platform, but you may as well do native if you're going to do that. So some companies prefer to have a consistent UI
18:23
across all of their channels. Some companies prefer to adopt the platform specifics of iOS or Android or Windows, whatever they're targeting. That's a key consideration. Do you need to use anything that's specific to the device? So in Windows, you need to use the connect sensor. Do you need to use any of those things? You can do some of that with Windows, but in other platforms, you can't.
18:41
So that's another consideration. Content policies is an important one as well. Do you have a site or service that has content in it that can't go in the app store? I'm not going to make any assumptions about what sort of content that might be, but certainly app stores don't let everything go in there. If you're in those kind of businesses, then hybrid apps is a way to go there. So lots of considerations.
19:01
All the slides are going to be available after, so you can go through this afterwards. So that's kind of choosing hybrid apps. I'm going to move now to sort of building hybrid apps. If you make the decision to actually do them, so you've ruled out native package, you've ruled out web, and you're going to go with hybrid. Now, you've got these two choices, native hybrid or hosted hybrid. I'm going to start with hosted hybrid
19:20
because that's one where we've got quite a lot of tools and technologies to work with here. So building hosted hybrid apps. And the way this basically works is you have an app package. Inside the app, and this is across any platform, inside the app package, you have a web view control. So iOS, Android, Windows, they all have these web view controls.
19:41
Inside that, you have a server hosted web application. So a URL that you can go to, you could access through a regular browser. That contains HTML, CSS, and JavaScript. It can be any backend stack. It can be ASP.net. It can be PHP. It can be Node. It doesn't matter. It has images and icons. It has a thing called the W3C web manifest.
20:01
And I'll talk about that in just a second about what that is. You may also have metadata with your app package, and sometimes you'll have native code as well. On some occasions, you'll have code that runs natively and does things like the live tiles and windows. Now that whole package gets submitted to the app store, whichever app store you want to use, hopefully all three of them, or other app stores as well.
20:21
And it has some level of platform integration with the device. So at a very minimum, it has icons on the start screen and the splash screens and that kind of thing. From that point on, it may just be a website and an app, but at least you've got the icons on the start screen and that sort of stuff. So that's the basic makeup of a hosted hybrid app. Now I mentioned this W3C web app manifest.
20:42
So this is actually a working draft of a standard from W3C. And what it does, it's basically metadata for a web application. So it describes things like the title of the application, the description, the background color. It describes all the images that are associated with it. It's a JSON file that's stored on the server. So it's stored alongside things like your site map
21:02
and your robots file and all those kinds of things. And I know you can't see that. I'll show you this in a bit. But this is just an example of one. We've got some things there around its orientation display, whether it's full screen or not. It has a scope, this idea of scope, which defines what's inside the app and what should go out to a browser.
21:21
And then all the icons that need to be used as well. So this is a W3C standard. Microsoft are heavily involved in helping to define this, but other companies are as well. And this is what we use for our tools to create these hybrid apps. So we have a tool called Manifold JS. This is an open source tool that's been written by Microsoft.
21:42
And what this does, it uses that W3C config file to help you create hybrid apps across all of the different platforms. So Windows, iOS, Android, Chrome browser plugins, Firefox browser plugins, Windows 8. There's lots of different platforms that this thing supports. And as I say, it's driven by the manifest file.
22:01
Now, if your platform natively supports hosted apps, Windows 10 has native support for hosted apps. That's what it will use. If it doesn't, it uses a thing called Cordova. Now, most people have probably heard of Cordova, and I'll talk about that in a little second as to what that does. But iOS and Android, it uses Cordova to kind of bridge the gap between the website and the native operating system.
22:22
You can also, there's a new version coming out next week. You can create your own platform. So there might be a platform missing that you want to target that's not on here. Very easily using a thing called Folds to create your own manifold plugins for that. And as I say, there's a new version due next week. It's quite a mature technology, really. It's been around for about a year,
22:41
and it's been through various iterations. It's kind of, it is open source, but we've put a lot of dev time into it ourselves as well. And we've got developers that work on this almost all the time. So it's quite a, it's not a pet project. It's quite a serious thing, and we're quite behind it as a company. So let's have a quick look at how that thing works
23:01
and create some applications with it. So I have a website already set up for this. So this is called Sentimental Web. You can go to this right now on your devices, sentimentalweb.azurewebsites.net. And what this does is this does sentiment analysis on text. So the idea is that you can take a piece of text,
23:25
analyze it, it's gonna use the Azure machine learning APIs to actually do the sentiment analysis. A thing called Project Oxford, if you wanna look that, it's a bit out of scope for this talk, but it's a really cool set of technology we've got. And this is 88% positive.
23:40
The keywords in that sentence were the word sentiment and the word awesome. So it's just a kind of simple website. It's a bit gimmicky, but this is what we're gonna use to create apps across almost every platform there is based on this website. So if I go to the Manifold JS website, I can go generate now. I can take that URL and enter it into the site itself.
24:02
And this is gonna do a check to see if there's one of these manifest files available for it. In this case, I've already got one set up, but if you haven't, it'll help you create one. So it's picked up the name and the short name, all of the icons that are involved with this website. And then I can just do generate package. It's gonna generate all the packages for me. You can also use this in NPM as well.
24:23
So it's an NPM package, Manifold JS, which I've already got installed, which lets you do things like Manifold JS, the website, and then we'll put this in a place called demo dump and just call it MF1.
24:40
And that's gonna go away. It's gonna take a look at the website and it's gonna download. There is a known issue with images, which we're not gonna worry about for now, but it's gonna start creating all these packages for me. Now, it does take a little while. So whilst that's happening, I just wanna show you what this creates. Now, you're wondering why I'm using the webcam. I've got an Android device here and this is the only way I know
25:01
how to project this device. So I'm using my webcam here and you can see hopefully there that little orange S icon. If I click that, there we go. It's a bit backwards and the wrong way around, but this is a native app. It's on the start screen of my Android device. It has native platform integration. So this is what this thing is producing in the background.
25:22
There you go. And you can just say hello as well. That's what you all look like. Everyone wave. Yeah, enthusiastic bunch there. Brilliant, thank you for that. So that's a nice little filter. There we go. Perfectly timed so that the manifold JS is finished doing what it needs to do.
25:41
So what that's done is that's produced a load of stuff in my local drive here. I've got this folder demo dump and you can see there it's produced MF1. And in here I've got Sentimental and these are all the projects. So these are actually kind of development projects for the various platforms that it's produced.
26:01
So we've got Android, we've got Chrome, Cordova which has Android, iOS and other things. The Firefox browser, just a general web and we've got Windows 10 as well. So let's just take a look at some of those things. If we just have a look at Android. Now I don't know much about, the only thing I know about Android is how to turn it on and how to do what I've just done. So I don't know anything about Android projects
26:20
but if you do Android, that should look fairly familiar as being an Android project. It's the same with iOS. We've got under Cordova platforms, we've got iOS as well. So you can take this project, compile it and submit it into the iOS app store just as it is. It's got all the icons in there, all of the bits and pieces, the right metadata, et cetera.
26:43
But the one I want to sort of spend a little bit of time on is the Windows project because we've got some quite interesting stuff with Windows. So if I just open this up, this is basically a Windows, a native Windows app written in HTML and JavaScript. So with Windows, you've always been able to write apps in either C Sharp and XAML or HTML, JavaScript and CSS.
27:03
So the web technologies have always been a native language for Windows apps, right from the start of Windows 8 in 2012. So what it's done here is it's built one of those apps for us. Apart from it hasn't got any code locally, all this has got is a package manifest which is the Windows metadata file for apps.
27:25
And that points to my website. So you can see the start page there is my public website and if we just run this, you'll see with not a lot of effort at all, we've got a native app. So we've got the splash screen there, you can see we've got an icon in the bottom corner there
27:42
and it does all the things that a website does because it is the website, it's just wrapped in a native app. So I haven't written any code here, all I've done is pointed manifold at the website and this is what it's produced for me. Now, this is responsive as you'd expect. So straight away, it's a pretty good experience but there's some extra stuff that we can do with Windows 10, we can search for it.
28:02
So it already appears as a Windows app, I can pin it to my start menu. So it's gonna show up there as a native app there as well. So we've got a pretty decent experience already with Windows but I wanna just talk a little bit more about Windows 10 because we can take this a lot further with Windows. So let's talk a little bit about Windows 10.
28:20
So in Windows 10, just by show of hands, who's got Windows 10 always running Windows 10? Okay, good, so this is hopefully gonna be relevant to a lot of you guys. So we have this thing called Project Westminster and what this is, it's basically the web view in Windows 10 is exactly the same as the Edge browser. The Edge browser is basically a Windows app that uses this Edge rendering web view.
28:43
We can use this in JavaScript or XAML apps. And the key thing about this is that JavaScript on the hosted website has access to the full Windows API. So just to sort of let that settle in, that hosted JavaScript can have full access
29:00
to the Windows API. It can do everything that a native app can do from a piece of JavaScript that's running on the web server. And for me, that blows my mind slightly. You can write JavaScript, host it on the web and do everything that a native app can do locally on Windows. And the way this works is we have the Windows app package we have the web view, we have the hosted web app
29:21
just like before. We have the metadata just like before which goes into the Windows store. And then we've got the wide range of Windows device. So I'm using a Surface here, but as you've probably heard, Windows runs on almost every type of device. So from a Raspberry Pi right the way up to an 18-inch Surface hub screen and everything in between. So phones, tablets, Xbox, desktops, laptops,
29:43
or every kind of device that has Windows can run these apps. So the metadata has platform integration into that. It has a JavaScript which can run from the web and execute local APIs. And it has the images and icons there as well. So let's just take a little look at that sentimental app and let's just add some specific Windows capabilities
30:01
to it to make it work a bit better. So we've got the sentiments that Manifold has produced this for us already. I'm just gonna have a quick look at the actual website that's behind this. So I'm using Visual Studio Code here, which is our free cross-platform editor. The only reason I'm using this because I'll get confused if I've got two versions of Visual Studio open
30:22
and it's a good opportunity to show code. But what we've got here, this is an ASP.NET 5 website, but it doesn't need to be, it can be any HTML language, doesn't matter. It's just that I've chosen five. And what I've got here is a bunch of JavaScript, which references this Windows.js which we'll look at in a second. And it does a feature detect for Windows.
30:41
And if Windows is present, it does some stuff. So it sends a toast or notification, it sends a tile update and it sends a pop-up. If we just take a quick look at the Windows.js, there's a bunch of JavaScript in here. I'm not gonna talk through this line by line. If you've done Windows code before, you'll recognize this, but it's basically just JavaScript that uses the Windows API.
31:00
So we can do things like set up a toast notification manager and we can do things like create a toast notifier and show toast. And this is all Windows JavaScript code, but it is just JavaScript. It just references the WinJS library. We've got another one for sending a tile. We've got another one for sending a pop-up message. So if I go back to my Manifold app
31:21
that was just created, the only thing I need to do to enable these capabilities, because this code's always been on the website, it's just we've not seen it yet because we haven't really looked at Windows yet. But if I go into content URIs, we'll see here that it's got the URL of the website as defined as being a content URL. And what that means is it's gonna execute inside the app.
31:40
Everything in this list happens inside the app. Anything that's not in this goes out to the browser. And one of the things I can do here is I can set the WinRT access. If I set that to all, what that's basically saying is anything on that URI has full access to the WinRT API framework, which means that that JavaScript code that's already on my website can run and do things.
32:01
So I've made that change, and I click save. And then let's run the app again and see what difference that's made. Now remember, I haven't touched the website yet. The website's always been there. The code for the website hasn't changed one little bit. So let's just do another, let's just do this again and do analyze.
32:26
Look at that. We've had the full access to the WinRT framework, and the best thing I could think to do was a pop-up message that says the sentiment score is 88%. But this is a native pop-up message. This is the same type of pop-up that you get with any Windows app. But we've got some of this stuff in here as well.
32:41
We've got, you've probably heard the sound there. We've got a notification. So it says the sentiment score is over 88%. So that's the code that sent the toast notification. One of the things we have to do when you're debugging is you have to, it doesn't remember pin tiles for some reason. I don't know why that is, but I have to just re-pin it.
33:00
So I put my tile back in there. And there we go. That's rolled around with the live tile information. So this is just some code, JavaScript code hosted on my website. It's always been there. But because we've enabled this access in the Windows app, it's been able to reach in and do things inside Windows. So these are some quite silly examples, but you do have access to everything that you can do in Windows.
33:20
So Cortana, the webcam, everything. I'll show a little bit more about how you actually build these apps up now. So I'm gonna create a new app. And I'm gonna choose a JavaScript app. So this is what you'd do if you were just gonna create a regular Windows JavaScript app.
33:41
Go to JavaScript universal blank app. I'm gonna call this one hosted. I'm gonna call the app hosted as well. Has anybody used a website called CodePen? Just by show of hands, has anyone heard of CodePen? Okay, so a few of you.
34:00
So CodePen is a really neat tool. It's basically an online website that you can use to kind of host code samples. So we've got this CodePen already set up which has some code, some HTML, some JavaScript in it for doing stuff with Windows. And I'm gonna set this as being the website behind this app that I'm creating now. The reason I'm doing that is because it allows me to paste code in
34:20
and just show you how that works in real time. So my Windows app's been created. Now this, at the moment, it's been created as a fully native Windows app. So it has native JavaScript, native images, all that kind of stuff. But I don't need any of this stuff. So I'm gonna delete the CSS. We don't want that. I'm gonna delete the local JavaScript, we don't need that. I'm gonna delete WinJS, we don't need that.
34:43
And I'm gonna delete the default HTML file, we don't need that. So I'm gonna set this up as being a hybrid app pointing at that website. And the way I do that is I just take that CodePen URL and I just set that as the start page. I go into content URI. So I'll say that that's going to be a content URI again
35:00
with full access to WinRT. And I also have another URL that I've forgotten to open. Bear with me one second. A lot of people use snippet managers, but I use Notepad because I'm old school. And this just says basically anything on CodePen
35:21
can have access inside this app. So I'm gonna run that. It hasn't got any nice images or anything just like that yet, because I haven't set that up. But that's not important for what I want to show right now. So this has got some code already in here. So we've got this button called Toast Notification, which runs this piece of JavaScript here.
35:41
I'll just zoom in so you can see that. Again, it's the same kind of JavaScript we just saw with the Sentimental app. If I do Toast Notification, there it is in the corner there. I've got like a double Toast Notification there. It's kind of weird. But it's, again, reaching into Windows, executing local Windows APIs. We've got a button there called Camera Capture, which is kind of interesting. So let's take a little JavaScript snippet here
36:02
called Camera Capture. And I'm just gonna paste this in at the bottom here. And then if I press the button, this is using the window, the native webcam on my device, which is still pointing at you guys. So wave again. There you go.
36:20
Take a picture. Much better than taking a picture of me. And then, obviously, because this is Windows, I can resize this. I can crop it. I can do that kind of thing. Now, we haven't implemented the Save action on this app, so it's just gonna throw that away. So sorry about that. It's a lovely picture, but it's been thrown away. But the point here is that, again, from hosted JavaScripts, I can reach in, I can do things with Windows,
36:40
I can activate the camera, the tiles, do all the things that I could do on a native app with Windows. So that's all there is to say about that. Pretty cool, right? Good stuff with Windows. So has anybody heard of Office? Hands off who's heard of Office? Cool, pretty much everyone. Most people have heard of Office.
37:00
It's probably the most used software on the planet in terms of users and exposure. So the hybrid app story continues with Office. So according to our boss, my boss at least, Office is the most strategic developer service area for Microsoft. So Satya, the head of Microsoft, thinks Office is where developers are gonna go to in the future.
37:20
It's really important for Microsoft. It's really important developers realize that Office has an app store and a developer ecosystem, which it does. You can build add-ins for Office, which have basically enriched the UI. They add functionality to the UI of Office. It's not just Office on Windows, it's Office on Android, Office on iOS, Office on the web, Office on your phone. Wherever Office shows up, you can enhance it with these UIs, these add-ins.
37:43
And the way an add-in basically works is that you have metadata, just like we've seen with all the other apps. You have a hosted web app. So these things are basically hybrid web apps. That hosted web app points to a server-hosted URL, which has HTML, JavaScript, CSS, all the things we've already seen. It gets put into the Office store
38:01
just like the other apps do. And then it can open up Office and it can have, basically it shows up as an iframe inside Office. The key thing here is there's a library called office.js, a JavaScript library that lets you kind of reach into Office and do things with the content of the Office document and have that interaction between Office and the app itself. So it's a really cool architecture.
38:21
It works really well. And again, it's a hybrid app. You build it using web technologies. You host it on the web. You don't have to deploy it locally. The only thing you deploy locally is this manifest file. So let's have a quick look at building Office apps. So I'm just gonna close some of this stuff down. So I'm gonna take the same website
38:41
that we've used all along, that Sentimental website, and go to File, New. And I'm going to go to Visual C Sharp, Office, Office Add-ins. So I just Office and Office Add-in. I'm gonna leave all that as it is. It's gonna ask me what type of add-in I want to create. There are several types of add-in,
39:00
but the easiest one is a task pane add-in. So that's what I'm gonna go for. It's then gonna ask me whereabouts in Office I want this to show up. Excel, PowerPoint, Project, and Word. Sounds good. I'm gonna leave those as they are. And that's gonna just go away and create the application for me. So what this is creating is two things. It creates a kind of local static web application
39:21
for you to use to develop stuff on. But I'm not gonna use that. I'm gonna get rid of that. And it creates a manifest file, which is this thing to link to the web URL. So the idea is you develop it locally, you publish the website somewhere on Azure or AWS or wherever you normally publish websites, and the Office application uses that to do its thing. So I'm gonna use the same website
39:40
that we've used all along. Now this website, this sentimental website, has always had in it this piece of JavaScript here. So it's got a reference to the Office JavaScript library, and it's got some reference to some of my own code, this file called officeapp.js. This, again, is just a regular JavaScript file, and it uses Office code using the Office library
40:01
to do, in this case, get selected data. So what this basically does is when you select some data in Office, it's gonna go and put that into the app. And just whilst that's loading, I'll just show you some of the other Office apps that are out there that you might be interested in. So I'm gonna load Word here. If you go to Insert, so if you've got Office 2013 or 16
40:23
or any of the mobile versions, you'll have this experience. You can go to Store, and this is the Office Store. So this is gonna be filtered for Word, because I'm in Word. If I load it in Excel or PowerPoint, it's gonna give me a different filter. But you can see, it's an app store. It's got apps, it's categories, you have ratings you can download,
40:41
and some of them are free, some you have to pay for. I've got a Wikipedia app already installed here. So if I just type in rand, which is a little way of generating random text in Office, this Wikipedia app is basically an iframe to the Wikipedia web application. There's nothing deployed locally. It's just pointing out to the web here.
41:01
Happy birthday, Caroline O'Connor. So I select the word video, and it's gonna go off to Wikipedia, and it's gonna tell me all about video and all of the stuff that Wikipedia knows about videos. And I can even take content from Wikipedia, click this button, and insert it back into the Word document. And it even includes things like the link and some metadata about the file.
41:20
So there's a real two-way interaction. And it's just a web application. There's nothing running locally here. This is all running from the cloud, all running as a web application. Another one that we've got that's quite cool is the Translator app, the Bing Translator app. And this allows you to translate things. So I can take that text there and translate it to Welsh. Or as we were at NDC,
41:41
why not translate it to Norwegian? And then take that content and insert that back into the document. So if you've got a document in a language you don't understand, you can just translate it in line and just insert it back in, and there you go. So that's the idea of Office apps. That's how you have this kind of two-way interaction. Again, they're just web applications.
42:00
So hopefully by now, my application's been created. Yes, it has. So as I say, we've got these two sections. We've got the manifest, and we've got the website itself. I'm not interested in the website. I'm just gonna load this manifest file. And in here, we've got basically a source location. So this is where do you need to go to get the source for this website.
42:20
So I'm gonna put in my code here. Click Save, and I'm just gonna run this straight away. Now this has worked every single time apart from last night in the hotel room. So fingers crossed it's gonna work okay. It's never failed me before apart from last night,
42:40
which is kind of scary. So it's gonna load in Excel. It's gonna load the add-in. And hopefully in a second, there we go, yippee. There's our web application. It's the same web application that we've used on Windows, iOS, Android, Chrome, Firefox, every platform you can think of. It does exactly the same thing.
43:02
I can type in some text. I can do analyze, and it does the same thing here. I can actually write some text in Office. I was written in Office, and I love it. And if I select that text, you'll see that that was copied automatically
43:22
into the input for the app. So that's that tiny little bit of JavaScript file on the website that's detected that I've selected text in Office, copied it across, and it means that I can do the text analysis in Office as well there. Now, there is actually a version. If you've got Office, go to the Office store. You can search for Sentimental. There's a more advanced version of this app
43:41
already in the Office store. It's actually doing really well. People seem to quite like it. It turns out doing sentiment analysis inside Office is quite a useful thing to do, so you can check that out. It even deals with typos as well, I just realized. So that's Office as well. So Office is yet another way to build a hybrid application.
44:02
So that's all about hosted hybrids. So that's about taking stuff that's on the web, lives on the web, runs on the web server, and reaching into the native application. Now, what about native hybrid or just hybrid? A lot of developers use the term hybrid to describe what I describe as native hybrid. And this is basically the idea of building hybrid native apps.
44:22
Now, this is basically an app that runs native HTML, CSS, JavaScript. Windows has always supported this. Other platforms support this as well. The code is hosted inside the app itself, not inside the website. So the thing about this is you're writing effectively a native app. You're just writing it in HTML and JavaScript
44:41
rather than C sharp or Swift or Java or whatever language that you wanna use. So for me, these are just native apps. They're just using web technologies. We have a thing called WinJS, which has been in Windows ever since Windows 8. It's in 8.1, it's in 10. So you can write these things using WinJS. And if you've got other platforms like iOS and Android,
45:01
you can use Apache Cordova or what used to be PhoneGap to do the same thing. It's also worth mentioning Xamarin at this point. Xamarin isn't really a web technology, but it is a way to write cross-platform apps in C sharp. So if you wanna write native rather than web and you wanna write in C sharp, Xamarin's definitely worth looking at. They're here today, you can go and see them.
45:22
So if you wanna do Cordova, we've got some stuff in Visual Studio that helps you with this. So Cordova's built into Visual Studio. It allows you in Visual Studio to build Windows, iOS, and Android apps using those web technologies, using JavaScript and HTML and TypeScript and CSS. And it gives you access,
45:41
it basically bridges access to those native APIs. So if you wanna use the camera, you tell Cordova I wanna use the camera and Cordova knows what to do in whichever platform it's running to invoke the camera. We've also got some visuals, some Android emulators in Visual Studio as well. So if you're interested in Android development, which I maybe should be a little bit more than I am,
46:01
projecting it through a webcam, we can use the, I maybe should have used these rather than projecting it through a webcam, but there we go. So that's all about building hybrid apps. That's kind of how to build hybrid apps. And next, I just wanna spend a little bit of time about how do you make them really work well? Five things you can do to really make them sing. The first thing is to make sure it's responsive.
46:22
If you're using a web application, it's not responsive, it's really not a good candidate for a hybrid app in any sense. If it doesn't adapt to the viewports, it's not gonna work very well. So in the app world, we have viewports ranging from four inches up to 80 inches. It's probably even more than that now, actually. Windows certainly spans that,
46:41
but also other devices, Android, iOS, they have all different viewports as well. So it has to adapt to the screen space that's available. And we've got lots of frameworks to help you do that. So Bootstrap and Foundation are two really good responsive frameworks. Or you can just use CSS media queries to do this as well. The other thing to do is be fast. So this is one of the key complaints
47:00
for people about hybrid apps is that they're not as fast or snappy as native apps. There's no reason why they can't be. So you saw the FT. If you actually use that on your device, that's really fast, it's lightning quick. It can be done. And YSlow and Google PageSpeed Insights are two tools to help you make your website or web application really fast. So they both do a scan on the site,
47:21
and they'll give you a report about saying how well optimized it is for performance. And they'll tell you a list of things that you need to do. So if you can get into the high 90s on YSlow, you're in a pretty good position for having a fast app. It is possible to get to 100%. I've done it a couple of times, but there's a lot of work you have to do to get quite that high. And Google PageSpeed Insights,
47:41
they use a different rule set, but it's the same kind of thing. So it's very easy to optimize for the web. It just takes a few hours. It's not rocket science at all. It's just a few things that you just have to do that you wouldn't normally have done. So there's no excuse for not being super fast. Offline, we saw with the Financial Times, you can make web applications work offline.
48:01
There's a thing called the App Cache Manifest, which basically lists out a load of files that the browser or the device caches, and that's what's used there. You've got IndexedDB and local storage for storing data offline. This is what I presume the FT do. They store all of the articles and content in local storage, and they just render it offline. So you can absolutely make the web work offline.
48:22
It's harder to do than it is with native apps. There's no question about that, but you can do it. We've seen it with the FT. More applications should do that. And actually, let's be honest, a lot of native apps don't work offline anyway. So you can actually be better than a lot of native apps if you do this. Design it as an app. So I didn't really do this with my sentimental.
48:42
It's kind of designed as a website, but there's a ton of frameworks out there for helping you design as an app. So the guys behind Bootstrap have a framework called Ratchet, which is an app, a HTML framework. Foundation have a version of their framework specifically for apps. It's designed to make websites look like apps.
49:01
You've got the Google Material Design Framework. It's just a load of different frameworks, WinJS from Microsoft, to help you design your app and make it feel like it's an app rather than a web application. And finally, where possible, do platform integration. So we saw with the Windows how much you can actually do. So you can do anything you want in Windows.
49:21
In other platforms, you can use the Manifold JS, the W3C web manifest, and you can use Cordova to reach into stuff on other platforms. So it's definitely worth looking at that stuff. And that's having that kind of platform integration beyond just the icons is really what makes it feel like a native app. So thank you very much. We've covered a lot there.
49:41
We've talked about choosing hybrid apps or not. What are some of the decision points about that? What's a good candidate for hybrid? What's not a good candidate? We've looked at a ton of tools for building hybrids. So we looked at Manifold JS. We've looked at the Windows Project Westminster stuff. We've looked at the Office stuff, and we've looked at the W3C standard. And then we briefly looked at making hybrid apps awesome.
50:03
I've about four minutes ago tweeted all of this stuff. So I wrote a blog article that summarizes all of this stuff. It has links to all of the things I've talked about. It has the slides. It has a video that I recorded a few days ago of this presentation. So you can go to that, and you can, thank you, Biebs, for doing that.
50:21
You can go and download all of that stuff from there. You can contact me as well. You can tweet me. You can email me. You can look at my blog. There's a picture of a liger there. And of course, please fill out the ratings using this kind of neat kind of post box thing. It kind of lets me know that this session was worth doing.
50:41
It hopefully gives me permission to be here again next year. And obviously, contact me directly if you've got any feedback, good or bad. I'm not trying to influence you, but I just like the color green. I don't know what it is. So thank you very much. Any questions? If not, thank you very much. Have a good rest of the day.