What’s the state of HTML5 & hybrid apps?
This is a modal window.
Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.
Formale Metadaten
| Titel |
| |
| Alternativer Titel |
| |
| Serientitel | ||
| Anzahl der Teile | 170 | |
| Autor | ||
| Lizenz | CC-Namensnennung - keine kommerzielle Nutzung - Weitergabe unter gleichen Bedingungen 3.0 Unported: Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben | |
| Identifikatoren | 10.5446/50813 (DOI) | |
| Herausgeber | ||
| Erscheinungsjahr | ||
| Sprache |
Inhaltliche Metadaten
| Fachgebiet | ||
| Genre | ||
| Abstract |
|
00:00
App <Programm>AggregatzustandBeanspruchungWindows PhoneBenutzeroberflächeAppletHumanoider RoboterMathematische LogikKette <Mathematik>CodeSoftwareplattformSoftwarewartungFormale SpracheGewicht <Ausgleichsrechnung>SoftwareentwicklerComputervirusGüte der AnpassungInformationsspeicherungBenutzeroberflächeDreiecksfreier GraphPunktCodeMultiplikationsoperatorQuick-SortProgrammierparadigmaSampler <Musikinstrument>DifferenteFormale SpracheSystemplattformVirtuelle MaschineApp <Programm>C sharpProgrammbibliothekEndliche ModelltheorieDienst <Informatik>VersionsverwaltungGamecontrollerPerfekte GruppeKette <Mathematik>DistributionenraumÜberlagerung <Mathematik>FreewareCASE <Informatik>GeradeTypentheorieHumanoider RoboterAbstraktionsebeneEin-AusgabeWeb ServicesComputerarchitekturErwartungswertSchreiben <Datenverarbeitung>SchnittmengeBenutzerbeteiligungVisualisierungKontextbezogenes SystemProgrammfehlerPunktwolkeBildschirmsymbolKonfiguration <Informatik>QuaderStandardabweichungProgrammierumgebungAuszeichnungsspracheMereologieSystemaufrufGlobale OptimierungRechenwerkMathematische LogikCodierungBildschirmmaskeDemoszene <Programmierung>SichtenkonzeptProzess <Informatik>Rechter WinkelWeb logProfil <Aerodynamik>Klasse <Mathematik>MaschinenspracheTwitter <Softwareplattform>Nichtlinearer OperatorSoftwareplattformGruppenoperationGradientCompilerUltraviolett-PhotoelektronenspektroskopieZahlenbereichComputeranimation
07:37
CodeMereologieProgrammierumgebungKette <Mathematik>App <Programm>Mobiles InternetHumanoider RoboterSchnelltasteAppletWindows PhoneSkriptspracheMathematische LogikArchitektur <Informatik>TypentheorieEin-AusgabeMinkowski-MetrikBenutzeroberflächeApp <Programm>Demo <Programm>BruchrechnungInformationsspeicherungBenutzerbeteiligungSystemplattformErwartungswertGrenzschichtablösungMereologieGebäude <Mathematik>Bildgebendes VerfahrenQuick-SortProjektive EbeneSpeicherabzugFramework <Informatik>Mechanismus-Design-TheoriePlug inComputerarchitekturWiderspruchsfreiheitSpieltheorieGemeinsamer SpeicherSoftwareplattformStandardabweichungBrowserVisualisierungOpen SourceAppletNatürliche ZahlFlächentheorieMultiplikationsoperatorCodeMobiles InternetHardwareStatistikGüte der AnpassungFormale SpracheSichtenkonzeptMAPDifferenteKurvenanpassungEmulatorDebuggingProgrammierumgebungPunktMaschinenspracheZahlenbereichInhalt <Mathematik>Cloud ComputingC sharpDruckspannungSoftwareEinsProzess <Informatik>BildschirmmaskeNominalskaliertes MerkmalTouchscreenQuellcodeDienst <Informatik>SoftwareentwicklerSkriptspracheSystemaufrufUltraviolett-PhotoelektronenspektroskopieARM <Computerarchitektur>Perfekte GruppeProgrammierungBasis <Mathematik>Fächer <Mathematik>Divergente ReiheCompilerPeer-to-Peer-NetzWeb logBitCASE <Informatik>Einfache GenauigkeitWeb SiteTopologieComputeranimation
14:56
Demo <Programm>SystemplattformVolumenZahlenbereichSerielle SchnittstelleVerzeichnisdienstFreewareSoftwareplattformWurzel <Mathematik>Minkowski-MetrikElektronische PublikationImpulsGammafunktionRechenwerkBenutzeroberflächeVirtuelle MaschineQuick-SortWechselsprungSkeleton <Programmierung>AppletDelisches ProblemTouchscreenBeobachtungsstudieProjektive EbeneGeradeAdditionPlug inReelle ZahlSoftwareentwicklerMereologieDatenstrukturMatchingSystemplattformCodeInformationsüberlastungBenutzerbeteiligungVerzeichnisdienstSichtenkonzeptDemo <Programm>Elektronische PublikationVisualisierungOffene MengeKünstliches LebenEmulatorMaschinenspracheEin-AusgabeApp <Programm>SoftwareplattformLastHumanoider RoboterComputeranimation
17:37
MIDI <Musikelektronik>Wurzel <Mathematik>Elektronische PublikationEmulatorQuick-SortDemo <Programm>Einbettung <Mathematik>BenutzerbeteiligungComputeranimation
18:12
BenutzeroberflächeSprachsyntheseSkeleton <Programmierung>MereologiePuls <Technik>Green-FunktionBenutzerbeteiligungMomentenproblemDemo <Programm>App <Programm>Quick-SortComputeranimation
18:55
SichtenkonzeptPlastikkarteSpeicherabzugQuellcodeBenutzeroberflächeHumanoider RoboterMathematikQuick-SortSkeleton <Programmierung>SystemplattformMaschinenspracheSprachsyntheseCodePhysikalisches SystemBildschirmmaskeZeichenketteDelisches ProblemBestimmtheitsmaßWhiteboardComputeranimation
19:45
SystemplattformElektronische PublikationWurzel <Mathematik>SoftwareplattformMinkowski-MetrikFreewareFermatsche VermutungKlon <Mathematik>Physikalisches SystemTaskWindows PhoneSprachsyntheseMustererkennungKonfiguration <Informatik>ZeichenketteLandau-TheorieFehlermeldungFunktion <Mathematik>PrototypingRechenwerkEreignishorizontFormale SpracheKonstruktor <Informatik>ProgrammierungProjektive EbeneRepository <Informatik>Elektronische PublikationKlon <Mathematik>Plug inVisualisierungEndliche ModelltheorieBenutzeroberflächeQuick-SortApp <Programm>BenutzerbeteiligungLastMaschinenspracheHumanoider RoboterSprachsyntheseSystemaufrufFehlermeldungEinfache GenauigkeitKlasse <Mathematik>ComputersicherheitAppletProzess <Informatik>ParametersystemCASE <Informatik>CodeMustererkennungIntegriergerätFunktionalSpieltheorieZeichenketteComputerspielComputeranimation
22:06
MenütechnikKonstruktor <Informatik>Funktion <Mathematik>EreignishorizontFormale SpracheWalsh-FunktionensystemVererbungshierarchieElement <Gruppentheorie>p-BlockDatensichtgerätGammafunktionDiskrete-Elemente-MethodePrototypingSprachsyntheseFehlermeldungSISPBimodulOvalPhysikalisches SystemTaskWindows PhoneMustererkennungKonfiguration <Informatik>ZeichenketteMinkowski-MetrikZustandsmaschineMIDI <Musikelektronik>SchätzungMultiplikationsoperatorSichtenkonzeptZeichenketteMustererkennungKlasse <Mathematik>ProgrammierungQuick-SortPlastikkarteGerichteter GraphSprachsyntheseKonfiguration <Informatik>ResultanteAppletFunktionalOvalSkriptspracheSignifikanztestWort <Informatik>ParametersystemMaschinenspracheMathematikTouchscreenElektronische UnterschriftWeb SiteZustandsmaschineBridge <Kommunikationstechnik>Analytische FortsetzungBenutzeroberflächeCodePunktMereologieBenutzerbeteiligungGeradeDemoszene <Programmierung>Kategorie <Mathematik>SkalarproduktFormale SpracheKontextbezogenes SystemTaskSystemaufrufKreisbogenApp <Programm>C sharpAusnahmebehandlungEigentliche AbbildungStandardabweichungPlug inBitFehlermeldungComputeranimation
27:24
Demo <Programm>AbstraktionsebeneSoftwareplattformApp <Programm>ProgrammbibliothekHilfesystemMobiles InternetPoisson-KlammerTexteditorPrototypingVirtuelle MaschineApp <Programm>BrowserGraphische BenutzeroberflächeSpeicherabzugPlug inGamecontrollerStandardabweichungDruckspannungRückkopplungVersionsverwaltungSynchronisierungCodeWellenpaketBenutzerschnittstellenverwaltungssystemBenutzerbeteiligungPhysikalisches SystemGemeinsamer SpeicherDatensichtgerätMultiplikationsoperatorMereologieEmulationSkriptspracheTropfenQuaderRechter WinkelOffice-PaketDokumentenserverProgrammbibliothekProzess <Informatik>BenutzeroberflächeIntegralDateiverwaltungSoftwareplattformElektronische PublikationSpieltheorieKontrollstrukturInstallation <Informatik>Interaktives FernsehenEinbettung <Mathematik>CASE <Informatik>VisualisierungQuick-SortProgrammierumgebungComputeranimation
31:19
Lesezeichen <Internet>ZeitbereichSkriptspracheLie-GruppeQuick-SortRückkopplungDokumentenserverGemeinsamer SpeicherOffice-PaketDemo <Programm>Computeranimation
31:52
TabelleMagnettrommelspeicherLesezeichen <Internet>SkriptspracheLokales MinimumPasswortCloud ComputingGasströmungSchlüsselverwaltungKardinalzahlROM <Informatik>AbfrageSummierbarkeitGraphische BenutzeroberflächeSkriptspracheMessage-PassingFormale SpracheGamecontrollerSoftwareentwicklerApp <Programm>Quick-SortMini-DiscMaßerweiterungDreiecksfreier GraphInstantiierungBitrateLastWeb-SeiteSchreiben <Datenverarbeitung>Generator <Informatik>Computeranimation
33:18
SkriptspracheGraphische BenutzeroberflächeApp <Programm>GEDCOMSoftwareplattformMIDI <Musikelektronik>NormalvektorRahmenproblemWeb-SeiteBildschirmfensterQuick-SortBildschirmmaskeGoogolNichtlinearer OperatorApp <Programm>CodeGemeinsamer SpeicherDifferenteSchreiben <Datenverarbeitung>HardwareBenutzerbeteiligungGamecontrollerBootenGraphische BenutzeroberflächeWeb-DesignerFächer <Mathematik>InformationsspeicherungPlug inBenutzeroberflächeGebäude <Mathematik>UmwandlungsenthalpieREST <Informatik>ComputerarchitekturZahlenbereichSchnittmengeBrowserSoftwareplattformOSAMereologieRechenschieberGüte der AnpassungEndliche ModelltheorieMathematikGanze FunktionSoftwareentwicklerEinsAbstraktionsebeneWechselsprungFacebookKünstliches LebenEin-AusgabeSoftwaretestTouchscreenExogene VariableProzess <Informatik>TropfenTreiber <Programm>AdditionOrdnung <Mathematik>Projektive EbeneMultiplikationsoperatorGlobale OptimierungUltraviolett-PhotoelektronenspektroskopieSkriptspracheSystemaufrufProfil <Aerodynamik>DatenverwaltungProdukt <Mathematik>KraftComputerspielSystemplattformTwitter <Softwareplattform>Office-PaketZentrische StreckungComputeranimation
39:24
OSAApp <Programm>Graphische BenutzeroberflächeArchitektur <Informatik>Physikalisches SystemDateisystemMaschinenschreibenTreiber <Programm>Kernel <Informatik>Graphische BenutzeroberflächeHardwareCASE <Informatik>SystemplattformStandardabweichungBenutzerbeteiligungApp <Programm>FunktionalQuick-SortKernel <Informatik>Web-SeiteDatenverwaltungSchnittmengeBenutzeroberflächeMailing-ListeMAPNichtlinearer OperatorUltraviolett-PhotoelektronenspektroskopieSpannweite <Stochastik>SoftwareBrowserKundendatenbankComputeranimation
40:51
App <Programm>RückkopplungFitnessfunktionProjektive EbeneApp <Programm>BitComputeranimation
Transkript: Englisch(automatisch erzeugt)
00:03
Hello. Good morning. Aha, it's working. Thanks very much for coming this morning. I wasn't expecting quite such a big crowd after the party last night, so I'll try and make this worth your while for getting up and coming to. I've never spoken to NDC, so I'll just introduce myself.
00:21
I'm Kevin. I'm a software developer with Redgate in Cambridge. We have a booth out in the expo hall, so come and say hello to us. We're not at all scary. If you have any questions throughout the talk, feel free to throw up your hand. Otherwise, grab me afterwards, or else I'm on Twitter, so tweet me and I'll get back to you.
00:42
So why are we here this morning? I want to show you what's been happening in hybrid apps, which is something, of course, just to do expectation setting. Who knows what hybrid apps are? Just a show of hands. So most people, just as a quick refresher, hybrid apps allow you to write most of your app
01:04
using web technologies and web standards, and then some of your app using a native platform, but it feels like a native app. So it started in mobile and now spans both mobile and desktop, so I'll cover both. And I have a slightly secondary goal of trying to encourage you to use them,
01:21
because I think it's a very nice technology. I have the caveat that sort of anyone that sort of tells you technology X is the perfect solution and will fix all of your problems. They're either lying wrong or both. So I think hybrid apps are really nice for certain use cases when used appropriately.
01:42
Hybrid apps, before hybrid apps, sort of your options were to write things using a native toolkit. So on both mobile and desktop, this is what people have been doing. So on iOS, you write Objective-C or Swift now, I guess. And on desktop, you would just use whatever,
02:02
Cocoa or WPF. From an architecture point of view, this looks like the vendors provide some sort of device with an SDK, like compilers and UI libraries. And then on top of that, you'll write sort of your business logic,
02:20
either on iOS, that would be Swift, on Android, you'd be using Java, Windows Phone, you'd be using C Sharp, probably. And then you'd define a separate UI for each of these. So using Interface Builder on Mac for iOS, using Android XML, if you want to declare the UI,
02:41
declaratively build the UI on Android, or else XAML on Windows Phone. So building things, and then the little cloud icon just sort of shows that pretty much every app on mobile and certainly a line of business, they're all backed by some web service. So your app doesn't stand alone. It's backed by something.
03:01
So building things natively has a lot of advantages. I've grouped a few of them together, just sort of saying you're using the supported toolchain. So this has some knock-on consequences around, you're basically using the toolset that the vendor used to actually write the OS and write the first-party apps. So things like debuggers, profilers,
03:23
documentation, sort of activity on stack, which is how we all program, all that stuff's there for you. Performance tends to be quite good, either because you're writing quite close, like native machine codes, or sorry, it gets compiled to native machine code, or else because you're using the APIs that the vendor used,
03:43
they're all heavily optimized paths. You get the look and feel of the vendor apps just through the virtue of the fact that you're using their control tools, and you just get a lot of that for free. One that people often don't think about but is useful is the fact that the vendors now control distribution for a lot of us.
04:02
So on mobile, certainly through the app stores, and also now on Mac and Windows, there's a move towards app store distribution through the Mac app store and through the Windows store. So if you use all the native tools, do exactly as the vendor tells you, you have a better chance of getting submitted and getting through there without having your app
04:22
go through cycles of rejection. So why don't we all just do native stuff? That would seem like the best solution. It has lots of disadvantages. So the obvious one is duplicated code. You're writing that up x times for the x different platforms that you're targeting. It's slightly worse than that, however,
04:40
because you're also writing that code in different languages, so there's no common language across all these platforms, and it gets even worse again because there's different platforms that you're having to write that code on. So if you're targeting iOS, you're gonna have to get a Mac. You're gonna have to use X codes, different environment, you're targeting Windows Phone, you're writing in C Sharp,
05:02
and you're in Visual Studio, and that context switching can be relatively expensive for small dev teams. And all of this, even if you pay that penalty upfront and do all that work, it's an ongoing pain because there's a heavy maintenance cost. If you want to add a feature, even a small feature or a small bug fix, you have to do it x times.
05:23
Can't really do a talking hybrid without covering Xamarin. Has everyone heard of Xamarin and know what they are? That's surprisingly small number. I thought this audience would know more. So Xamarin's a really, really nice technology, and it allows you to target Android and iOS using C Sharp,
05:41
so you just have a common language across all the platforms, but you're still building native apps. So if we look what that looks like, you still have iOS and Android and Windows Phone, the base OS with all of the SDKs. Xamarin then provides an abstraction layer on top of that called Xamarin.iOS and Xamarin.Android
06:01
that is very thin and marshals from nice C Sharp types and C Sharp idioms through to, in the case of iOS, through to the Objective-C native APIs, and in the case of Android, through to the Android SDK. So it's basically all the P invoke calls, but it's very nice. And then on Windows Phone,
06:21
you obviously, Microsoft have C Sharp as a first-class citizen, so using this tool chain, you get full C Sharp coverage, and it's still native. The idea is that on top of that, you write sort of a common C Sharp business layer, so that code's 100% shared. That's the thing that's calling out to your REST services or doing some computation,
06:41
doing validation, all that sort of stuff. But then for the best UX, to really make it feel like a first-party app, you still need to build separate UIs, so you still need to use Interface Builder, use XML and Android, or else build some XAML. With the latest version of Xamarin, it's actually quite interesting. They've released Xamarin.Forms,
07:01
which would merge those top three boxes, but it's not a perfect solution because although it's native controls and will feel fast, the UI paradigms are different enough across the platforms that to truly feel like an app that was made by Apple, you'll still need to build separate UIs.
07:23
So Xamarin, really nice solution. You really get all the same advantages as native. So the way the tool chain works is you write C Sharp. It compiles it through the model compiler, produces MSIL, which then gets ahead of time compiled, so you produce actual machine code, so that code executed in the device,
07:41
there's no difference if you went through the first-party compiler or through the Xamarin stuff. You have fewer languages to learn, so for the majority of your app, you're still writing in C Sharp, which is really nice. You have fewer environments for big chunks of your code, so you can use Xamarin Studio or MonoDevelop
08:01
across all platforms, or you can stay in Visual Studio. And the big one is that you get to reuse your existing skills, so over the last 14 years, we've all been building up lots of C Sharp expertise, so now we get to reuse that and target mobile platforms. But it's not a perfect solution. Everything's got disadvantages, and for Xamarin,
08:23
there's still some duplicated code with all of the problems that that has. It depends on the sort of nature of your app as to how much duplicated code you've got. If you're doing pretty much everything in C Sharp, then obviously you've got really good code sharing, so I think Hanselman, in his talk on Wednesday,
08:43
gave some really good examples where games can get 95% code sharing because they're doing all the drawing and stuff themselves. But if your app is just something that calls out to some cloud service to get JSON and then render it on screen and have some forms, then a big chunk of your app can actually be that UI layer,
09:01
so if you want to build separate UI experiences for each of them, then you still have a lot of duplicated code. Just because we're C Sharp devs doesn't mean we're mobile devs, so you'll still need to learn how to work with all the different platforms to make apps that feel like they belong on the platform.
09:22
And then the big one, I guess, depends on what you care, so I quite like Xamarin, and I trust them not to screw me, but it is a proprietary tool chain, so you're now, for your core app, putting someone between you and the actual device vendor, and that's closed source. So all the things with vendor lock-in,
09:41
like they could increase prices or remove platforms, that kind of stuff, or they could lag behind native if iOS 10 gets released with some new feature that you want to use, all that sort of stuff. I think it's not so important because Xamarin's a good company. So that brings us to why we're actually here this morning, which is hybrid apps.
10:01
So hybrid apps, they came out of mobile, and there was really, at the start, there was no clear winner in which device type was gonna win, and that's still true, so we have to at least, as developers, target iOS and Android, and increasingly, we have to target Windows Phone as well.
10:21
So people looked for commonality across the devices to see what's actually there in each of them, and really, the best common denominator is the web browser. So you can create an app that gets a web view on the screen, so it's an app that they install through the App Store and that kind of thing,
10:41
but it uses web to actually render all of the content. So there's a bunch of companies that do this. They all have their merits, pros and cons, but the biggest one, or the one that's got the most market share and the most traction is Cordova or PhoneGap. So I'll probably use those interchangeably. For those of you that don't know,
11:02
it's reasonably complicated, but PhoneGap is basically the trademarked name of the open-source Cordova project. Cordova, you almost certainly have apps built using Cordova on your phone. There's a few really big ones, like Untapped, which is sort of like Foursquare for beer, so you get to drink beer and then check in to say,
11:22
I drank this delicious beer, and you should all drink it. I haven't been using that much in Norway because as nice as your country is, your beer is really, really expensive. But these stats are from PhoneGap Day EU last year, but the Untapped creator was on stage sort of speaking about his experiences, and he now, at that stage, and his growth curve was crazy,
11:41
but at that stage, he had over a million users that were checking in about 45 million beers a month, and none of those users care that it was built using PhoneGap. They just care that it's a really nice app that lets them sort of share their passion with people. Another good example of a PhoneGap app that you may have used is 2048, which is that very addictive game where you move the numbers around to double things up
12:01
and then pull your hair out when it doesn't work. But that was built using PhoneGap, and in both cases, they could reuse all their existing web skills to get something on mobile that users love. Microsoft have also released first-party support now for Cordova. So in Visual Studio, there's a CTP out where you can just sort of go file a new project
12:21
and get a Cordova app up and running with emulators and debuggers and all the sort of stuff that you want. So this is what Cordova and most of the hybrid apps have looked like from an architecture point of view so far. So the device layer, again, uses Android, Windows Phone, and Cordova supports every other platform
12:40
that you could possibly imagine. There's a native piece of code, which takes all of the native features of the device, so all of the hardware and all of the API surface, and projects that through a consistent JavaScript API. And the aim with Cordova is that the JavaScript API will be web standards where possible,
13:01
and they basically act like a polyfill. So anywhere there's not a web standard to do what you want to do with the device, they'll create one and try and encourage the browser vendors to standardize it. And then against that consistent JavaScript API, you can write all of your app in JavaScript and all of your UI in HTML.
13:23
The problem with this is that you may have noticed I've called this the heavy Objective-C app and heavy Java app, and that's really because Cordova traditionally has been essentially a single big native app that projects out all of the API surface of the native devices,
13:42
and that leads to a very large code base, reasonably long compile times, and reasonably long startup times. So in the last year or so, Cordova's moved away from this architecture to something that's really nice, and Cordova now is basically a plug-in framework. The native code doesn't really do anything anymore apart from provide mechanism to load plug-ins.
14:05
And those plug-ins can do things that Cordova has traditionally done, like GPS or storage or NFC or whatever. And each of those plug-ins feeds into this consistent JavaScript API, which you can still use to build your app.
14:20
So the plug-ins are all maintained by the Cordova project for doing the core things that you'd expect. But what I want to show this morning is how easy it is to take something and add it into this plug-in space. So this could be something that only your phone does, like Siri or something that isn't part of a standard yet, or it could be existing native code
14:41
that you have to do crazy CPU-bound image manipulation or something. So that will be the first demo. Let's see if it works.
15:03
I'm going against all wisdom here and doing some live coding. Let's see how it goes. So I'm going to make a directory for this NDC demo. And Cordova have distributed a handy command-line tool called Cordova CLI, which you can install, which sort of works like real scaffolding,
15:22
if you've used that, to really just build projects really fast. So I can just do Cordova create NDC demo one, two, three, and then you have to give it an ID. So this follows the sort of Java-style IDs, and that will create my project.
15:48
So if we take a look of what that's actually created, you can see that I have my www folder, which is the actual apps, the JavaScript and HTML that make it up.
16:01
I have plug-ins where there is none yet, so this won't be able to access any device hardware, any native features that aren't part of the web spec. And then platforms. So this is the actual native code that runs on the device. So as you can see, I don't have any yet. So let's jump back to Cordova CLI
16:21
and add a platform. I'm going to add Windows Phone 8 just because it's easy to demo on this machine, but you can add Android or iOS or whatever else you want to use in this same way. And then if we jump back to platforms, you can see the Windows Phone 8 folder has been created, and in there, there's all the sort of CS Proj and SLN files that you'd expect.
16:44
So let's jump over to Visual Studio and open that guy up. And it just follows the same file structure of the www from my actual app.
17:01
The addition is this CordovaLib. So this is the sort of skeleton thing that gets the actual app up on screen and opens a UI view and loads your assets into that web view and that kind of stuff. So if we run this guy, then over in my emulator, come back. He's there.
17:36
Let's close the emulator. Start it again.
17:47
So this is compiling the codes, embedding those assets, the actual web assets as resources, and then it will deploy to my emulator.
18:03
Not having an emulator sort of makes these demos not work.
18:23
How do you do that? Oh, it's right there. Ah, well spotted. Yeah, I would never have worked that out. So here's my app loaded in the emulator, and you can see this green pulsing bar just sort of says this app is ready to go.
18:42
So it doesn't do anything particularly interesting at the moment, so let's add a plug-in that would sort of expose something that isn't part of the web spec yet but that my Windows Phone can do. So the thing that I've chosen to demo is speech. So I have something up on GitHub here, just a skeleton plug-in,
19:00
just to see if creating that boilerplate, which, if we take a look at it, has native sources for Android and Windows Phone. So that's the actual native code that's going to do, to begin with, text to speech. So give it a string. It speaks out aloud. And then in the www, you've got speech.js.
19:21
So you'll notice that although I had two native platforms, I've only got one JavaScript, and that's sort of the aim, is that you can add platforms in, but your consistent JavaScript API doesn't change across platforms. So if I go back, copy this to the clipboard,
19:49
so let's do Cordova plugins add, give it that git repo, and it will do the clone for me, add things to the right place, and then when I jump back to Visual Studio,
20:02
you'll see it's noticed that the SLM file has been updated and the prod has been updated. So let's go reload. And now we've got some additional things added. So we've got these plugins added, which is the native code. So if we look at that, you'll see it inherits from this base command,
20:21
which is just the way you define plugins for Windows Phone and C Sharp, and then Java on Android has similar idioms, which uses a speech synthesizer thing. So that's not available in web, but we've made it available. And then when our app loads in the web view,
20:40
there's now a JavaScript file called speech.js, and all that defines is a single JavaScript function, which takes some text, some success and error callbacks, and then all it does is call this Cordova exec function, pass along success, error,
21:02
a string, which is the class that I want you to go and look up in my native code, the method in that class, so speak, and I would like you to pass along to it this array of arguments, so text in this case. Because this is Windows Phone and the security model requires that all the apps define what they need,
21:20
we have to switch on some capabilities. So I'm going to switch on microphone, because I'm going to use that in a second, and switch on speech recognition, because that's the thing that actually does text to speech. So that just sort of says to the OS that I'm about to use it. And then over in my app, this on device ready handler
21:45
gets called whenever Cordova has started and sort of says all the native stuff's been initialized and you can start doing device things. I can just do speech.speak. Norway is awesome. Let's see if this works.
22:08
Norway is awesome. Yay, it worked. So that's a plug-in that I had pre-built, but I want to show you how easy it is to extend this to add some new native functionality
22:21
that I want to expose. So let's say I wanted to do speech recognition. Definitely not widely deployed part of the web standard yet. So let's sort of start from the outside in. So if I was writing, if when this becomes part of the web standard and gets widely deployed, it'd be really nice if there was a function like speech.recognize.
22:41
I wanted to just recognize some text so it doesn't get any orgs because I just wanted to recognize whatever it hears. But I would like it to call me back with whatever it heard. And then you could imagine if this was like a conference app or something, you could sort of filter by speaker
23:01
based on what name had been spoken. But for the purposes of this demo, let's just alert it to the screen. Okay, so that's what my app built. That's what I'd like it to do. The JavaScript plug-in that's gonna shim across the native code,
23:21
it needs to find a separate function. So that recognize function. And you'll see how little has to change here. So I'd find function. It doesn't take orgs anymore because all it takes is a success and error callback.
23:41
I still want to use that same class, that same speech class that we defined in C Sharp. But now instead of using the speak method, look for this recognize method. And I'm not gonna pass along any orgs because there's nothing to this method. And then over in C Sharp, let's just define this method.
24:01
So all methods that go across the bridge from the web view into C Sharp all follow the same signature, which is void name string of options. And this string is a string of JSON.
24:21
So you can use JSON.net to deserialize or else Cordova provides this JSON helper. So we're not actually taking any arguments, so we don't need that. So I just happen to know that there's a thing called speech recognizer UI, which has some settings. And one of those is show confirmation.
24:43
So we don't need this because we're gonna alert to the screen. But you could use this. You can sort of see that you get the full API. So you can do all the sort of language detection and stuff. I can use that recognizer to recognize with some UI. This is async. So if I've done this properly,
25:01
I'd use await and do it all nice. But just for now, give me the task. And on that task, continue with a function which will use the task which has a result, which has a recognition result. So again, this is terrible, and you wouldn't do this in reality. You'd do proper error handling and stuff.
25:21
That recognition result has the actual task, sorry, the actual text that has been spoken. So this is my spoken text. So now this call, this recognize method will get called. It'll return almost instantly because it's async. And some time later, my continuation will get called
25:41
to say that I have finished and I have hopefully detected some text. So now I want to pass that result back to the WebView. I want to call that success handler that we defined in JavaScript. So Cordova makes this really trivial. You have a dispatch command result. I am a plugin, so I will give you a plugin result.
26:00
I won't do any error handling because this will definitely work. So I'll just say that everything was okay. And the only arguments to that success callback are, sorry, spoken text. Okay, so that should be it.
26:23
Let's see if it works. So I press play to deploy it. My app starts. Norway is awesome. It does the speak bit from earlier because this is the first time this app's ever, in fact, this phone has ever used speech recognition. It's sort of saying, is everything okay?
26:42
So let's say it is. Will this detect my accent or should I have spoken like an American? Pretty close. So you can see that it's pretty easy to take native functionality and expose it. So that's things like on iOS,
27:01
you could have used Siri here. On Windows Phone 8.1, you could have used Cortana, which does much better recognition. But the idea is that in five or 10 lines of code, you can really quickly build up an app that exposes out some native stuff. Or this could even be something that's in your business, some existing C Sharp code that you want to expose.
27:22
Where did PowerPoint go? Okay. And the idea is that over time, these plugins will become less and less. You will just be able to deprecate
27:42
some of the native plugins as they become part of the web standard. This has already happened for things like file system, where you used to have to have a plugin, a polyfill that sort of gave you access to the file system. But now most of the mobile web browsers support that. So I've been working on hybrid apps on mobile for a while. And I really like the workflow.
28:01
I think there's a very productive way to work, great way to share code. But I work at Redgate, and we don't actually build that many mobile apps. And we're still mostly on desktop, actually. So what I want to see, if I could take the workflow advantages that you get on hybrid and mobile and bring it to the desktop.
28:23
And when I first started looking around, the best way to do this seemed to be to use the built-in IE web browser control. But that's really scary because you don't know on the end user machine what version of IE they're going to have installed. You don't want to leave something like that up to chance. It'll break on their machine,
28:41
and they'll be very unhappy. So it'd be really nice if you could distribute just the control, not a browser, but a browser control, which is modern standards compliant and really good. So when I looked around, I found Chromium Embedded. So Chromium Embedded, or Ceph, is essentially the C-sharp core of,
29:00
sorry, the core of the Chrome web browser. It's repackaged as an app, and then it's distributed along with your stuff. So it's repackaged as a library, so you can distribute it along with your app. And then it's got some very nice features for allowing you to host it in your C-sharp app, like your WPF app or your Cocoa app, or whatever platform it is you're using,
29:22
and interact with it. So you can still write pretty much all of your C-sharp, all of your app in C-sharp, and then just write the UI layer in HTML. When I first suggested using this in the office, all of the other devs said, no, you should find someone else that uses it and make sure this is stable and something we want to take a bet on.
29:40
So I looked around, and it's almost certain that you will have this installed in your machine and not even realize it, or at least I was surprised to find that was the case. So the biggest app that I can find that uses it is Spotify. So Spotify is a C++ app, C or C++ app, but the entire UI is built using HTML.
30:02
So on Mac, on Windows, they share the same UI. All they do is the C++ app boots, gets a web control onto the screen as fast as possible using Chrome embedded, and then displays these embedded assets. Valve use it on Steam. So if any of you here are gamers,
30:21
you've probably got Steam installed, and their UI, a lot of the in-game UI for the Steam UI and all of the Steam game picker stuff, is all HTML5 using Ceph. And then one that I found really surprising is Dropbox. So Dropbox uses this as well. I don't really think of Dropbox as having much UI. It just sits on my system tray
30:40
and keeps all my files in sync, but this little system tray control is built using Ceph as well. And there's a bunch of others. This thing's gaining traction now. So Adam, the new editor from GitHub, uses it, and Brackets, the new editor from Adobe, uses it. So it's getting more and more popular.
31:00
So we built a few prototypes, but one of the problems that we had was that from where I get people expect, we built add-ins for Visual Studio and SQL Server Management Studio, and people expect fairly deep integration into the IDE. So we wanted to know could we do that using JavaScript and HTML. So we built SQL Scripts,
31:21
which is a snippet-sharing thing in SSMS. And you can see here it looks quite nice. So it allows you to, when you're coding some SQL, select a chunk of it, sort of share with community, and it gets added to a big repository that's searchable and everyone can use it. And the feedback on this has been really good. So you might be thinking that, or certainly some of the guys in the office thought,
31:40
this looks quite nice, but I could do this using WPF. It's just a nice sort of theme. So I have one very quick demo that shows some of the advantages of, some of the advantages of this way of working that may not be sort of obvious from first glance.
32:01
So here is SQL Server Management Studio. Here is SQL Scripts integrated in the IDE. So this is using all the SSMS extensibility APIs. So it's C-sharp language we're familiar with, but it's about to start a Chrome control. If I hold down this shift key as it starts, then not only does the app start,
32:21
and hopefully work, good, but I also get an instance of the Chrome dev tools. And so now I can interact with my app as if it were a webpage, which it essentially is. So I can do something like find this all scripts element,
32:40
and then update that to all awesome SQL scripts. And that just updates. So what we found is that just the rate of development and the rate of iteration, especially when you're working with designers, we have a bunch of designers in the company, and working with them before was painful because they would sort of come over as you had written loads of XAML, look at it, go, no, that's rubbish, that's developer artwork,
33:02
tell you what to do, stand over your shoulder as you recompiled, restarted SSMS, and now they can just do it all themselves. So they can come in here, fix it up, you can write that back to disk as HTML, and you just sort of shorten those feedback cycles.
33:26
So Google have noticed this sort of trend, and now have got their own platform called Chrome Packaged Apps. So these are hybrid apps on the desktop. This is a screenshot of Postman, which some of you may have used if you do web dev. It's a really good tool for exploring REST APIs.
33:45
But... How are we doing for time? Okay. It allows you to explore web APIs, make JSON calls, see what they look like, and this is something that would have before been a desktop app almost certainly,
34:01
but now it's a Chrome packaged app. It's all built using HTML5 and JavaScript, and then distributed through the Chrome App Store. So as you can probably tell, I'm a pretty big fan of hybrid apps. I think it's a nice way to build things, and it's got some nice advantages. The most obvious is code sharing.
34:22
So the ability to sort of just write code once, have it run across lots of different platforms, sort of the dream. In addition, you get transferable skills. So when you write on iOS using JavaScript, it's not a big jump to move to writing on Android using JavaScript or a Windows phone.
34:41
A subtle one, but important, is the pace of change in web development. The web platform is the biggest platform by far, and the number of companies investing in tooling, so debugging, profiling, all of that stuff is massively fast-moving on the web, and you get to inherit that all for free
35:01
across both mobile and desktop. And then one that sort of works for me at least is the sort of idea that you're building future skills. So the web has been quite a disruptive technology on desktop. If you look at things like Google Docs and Office Online, a few years ago, they would have definitely been exclusively desktop products,
35:20
but now the web provides a lot of that, and this is likely to continue. So it's likely that more and more things that were traditionally mobile apps for performance reasons or for access reasons will just move to web. So this is something that you're building now. I did say, though, that it's not perfect. Anyone that sort of tells you
35:41
that this is the only way to do things is almost certainly wrong. The really big one is performance. So every layer of abstraction you add obviously have some performance cost. Depends how important that is to you and what your app's doing, but hybrid apps definitely have a performance cost, especially on older hardware or using the older sort of Cordova style.
36:02
The modern stuff's not so expensive, but it's still expensive. Look and feel. So your app won't look and feel like native controls. So you can use... There's plug-ins that will make it easier to build up a native UI using code behind
36:20
sort of like Xamarin.Forms, but not quite as good, to build up native tab controls and that kind of stuff. But to be honest, you tend to fall into this uncanny valley where your app almost looks native, but not quite, and then users don't respond well. So the more successful ones have just sort of developed their own style. If you think about Facebook where it doesn't
36:41
really look like a native app on any of them, but the experience is still quite nice. So as long as the experience is nice, users don't really mind. And finally, a big disadvantage is that none of this abdicates testing across what is a pretty fragmented platform, especially on older devices.
37:01
So Android used to ship with a fairly mediocre browser, which gets reused for the Cordova apps. And that browser just didn't do enough to make the apps feel good. So if you have to target older devices, this will be a real pain.
37:22
If you're lucky enough to be targeting newer devices, like Windows Phone 8, then you have IE 11 now. On Safari, you have really fast JavaScript with iOS 8 and WebGL. And on Android, it now ships Chrome as part of the OS, so all of the improvements they make to desktop now come to mobile for free.
37:44
I have a couple of final slides on sort of what a potential future may be for app development generally. You're a fool to try and predict anything beyond six months, but they told me not to do that live coding demo, and that worked, so I'm going to try and do it anyway. You could imagine some sort of future OS
38:03
that has an entire app model that is purely JavaScript and HTML. So there have been a few attempts at this. Some of them have worked, some of them haven't. So WinJS on Windows 8 allows you to write apps for Windows 8 that are entirely web or HTML and JavaScript-based, so built using entirely web technologies
38:22
and hasn't, I would say, been terribly successful. But this one has seen a lot of growth. This is a screenshot of Chrome OS, which is sort of a... It's good for a very specific set of needs, which is basically a one-up browser on a really cheap device which has a really long battery life.
38:42
And then they also have all of the Chrome packaged apps, so like Postman I showed earlier. So now your app can run across Windows and Chrome OS using the same code base. Another sort of really ambitious one is Firefox OS, previously known as Boot to Gecko.
39:01
And so the next year will be interesting for this project. It's either going to become very successful in developing countries or likely fail. But it allows you to use a phone very cheap where all of the apps are built using HTML5 and JavaScript. And if you've played with one of these, it's very impressive what they've done.
39:23
The architecture for both of those and sort of maybe every future OS could be you have some hardware layer. So here I have just a Linux kernel with some drivers, but you can imagine Windows with it there as well. That layer is responsible for doing all of the hardware management, so it interfaces with NFC, it interfaces with the radio and Wi-Fi.
39:42
On top of that, user land basically becomes a web browser, which wraps up all those native devices and exposes them as hopefully web-standard APIs. So in Chrome OS, that's provided by Chromium, and on Firefox OS, that's provided by Gecko.
40:01
That takes all of the native functions and all of the sort of software-level APIs you'd expect, like using some settings management or contacts management, that kind of stuff, and exposes that to all its web APIs. It's really interesting the way Firefox OS is developing, where if you go to the Mozilla page,
40:21
there is just a list of all the APIs that they think the web needs to really compete on mobile, so things like NFC. So there's no way to do NFC through a web page yet, but Firefox OS, they have something because they're implementing this, and so they're implementing something now and then putting it through standards committee later.
40:42
And then all of the apps, in the case of Chrome OS, Firefox OS, and maybe in the future lots of other platforms as well, all of the apps are just built using HTML5. So just in summary, what I want to get across to you is that hybrid apps have matured. They started on mobile but aren't just there anymore. They now work across a range of devices,
41:01
but still this massive caveat that you can't just switch off your brain. They won't be a fit for all projects, but they fit for more projects today than they ever have before, and in a year, they'll fit for even more. So thank you very much for listening. I finished a little bit early,
41:20
so if you have any questions, I can take them. Otherwise, you can tweet me, if you have questions, come up later. Thanks. Are there any questions?