6 APPS ONE CODE WITH ANGULAR - Sani Yusuf

how to talk about the spaghetti Jeff you had to do that good morning everybody how we doing today good energy good good I like that all right I'm going to be talking about six apps one code with ionic yep yeah so without further ado let's begin I'll get the boring stuff out of the way am i late with dating profile picture you know so I'm sorry Yousuf I'm the founder of hybrid I'm a Google developer expert for web technologies as well and I have a little project I'm working with on call UI school where I'm the lead instructor more about that a little later and I'm a huge fan of the Avatar movie like the blue people not that other nonsense thing they did that one if you have not seen that movie we cannot be friends I will repeat we can't be friends if you meet a funny just Google Santa Youssef or at San Youssef he found anyone looking as gorgeous as this with that username just let me know so I could sue them thank you alright let's start so the web is everywhere today like everywhere like everywhere you go mobile you see the web the web aspiring mobile today your mobile apps your mobile web apps a lot of all these things traditional web applications is so crazy in 2018 we have to use the word traditional web applications to to convey meaning that's how far we've come but in case you don't know what I mean basically if you have to sit down on the chair somewhere and have a big screen in front of you or multiple yes that's a traditional web application a standard desktop application so if you have to download some exe or I don't know what the Linux people do I think you have to like create your own debugger to have that things like that but yeah those ones IOT Internet of Things I think one word for this is just look for a guy called Yuri shake it and that's all you would see how IOT is powered by the web but yeah v you coming along all these things so javascript is really really powering the IOT and when I say the web I guess what I mean is web technologies anything that you can build with JavaScript HTML CSS and JavaScript basically like a browser or non browser environment with web technologies and that is what I constitute by the web server site we also how nodejs pretty much changed the landscape of development node.js came along and people just stopped writing real scripts and started writing node scripts which is good TV applications I think everyone in this room at this point is probably not using an analog TV and probably not even a digital one everyone has got a smart TV now a lot of people Smart TVs and a lot of those applications are actually powered by Web technologies and then you talk about proprietary devices what do I mean by that console games Xbox Playstation or if you like me you like to fly and you fly the really really poor people's class you know and they give you this screen apparently just to make yourself feel good yeah some people get beds but you get a screen and yeah if you actually play around I love those are actually web web applications I know cuz I've broken one of them while flying before yeah so let's play a quick game was it a game it wasn't a game I'm giving free Tesla's by the way I got the attention it now so I want you to go on this website sli daddy-o very short sli w and it should ask you for an event code no sign-in nothing and you should just put ng C for ng-conf SLI do anybody there yet we should see one question with a bunch of answers right so can you spot the web application is the name of our game can you spot the web application the first one is on top there anybody know untapped yeah we've seen all the alcoholics in the room uber exactly we all know Ober sworkit anybody's work it out anybody okay slack anybody knows slack Visual Studio code anybody know this one so these are your options quickly go vote you can vote multiple choices one choice slowly up to you spot the web application and while that's happening actually what I'm going to go and do is actually see the results and I'm just going to refresh and see how we are voting Wow interesting okay so Wells everybody's what we have like 48 people voted we have some people on tap none of them vs go slack uber the main point of this is not to show you who's right or wrong it's just more about the distribution of opinion here how some people think this is the way Bob that's the way about some people that even think all of them is the webapp actually a lot of them so what's the right answer what is the correct answer the correct answer is all of them are actually built with web technologies so if you voted for that you have just won a prize I said I'm giving out Tesla's pictures of Tesla's I meant so congratulations one yourself a picture of a Tesla so but some people might be still skeptical at this point they might not believe me okay so it's all about devices today our apps run on different devices different devices we all have like multiple devices right either you have a phone and a laptop or things like that and if you notice if you have a the same app across devices the app actually doesn't really the functionality doesn't change all that changes is the experience so screen size and accessibility and inputs those are the things that determine that experience like I could use my spacebar to control the slide but I'm using this so it's like the experience I when I know like I click this clicker I want the slice that's still you know go to the next slide so it's all about the experience that changes and it's basically like this so this is fortify everybody knows what if I write and this is what if I run it on multiple different environments but the main experience of Spotify is you want to listen to music and in each and every one of these you can listen to music you you might wake up and turn on your Alexa home play Spotify you know on your way to the train station you you're using your your phone when you go jogging you have your SmartWatch on your car you play Spotify you go to work and you pretend you're working but you're not and then you toggle Spotify and you get home after a long day what you do you turn on your TV Spotify and at every single point of time your play lists your experience everything just moves the functionality doesn't really change this just the experience that changes so what the issue here because that what I just showed is basically what one if you have an ideal application like you have a billion dollar application you'd want your app to work on all these platforms but what's the issue with that this is the problem this guy like throw some reason you have to support iOS you first of all have to find a developer which will not the person is not actually not not gonna work full time for you because they know they can get a job anywhere that's number one and they want sixty percent of your company leaving you to be a minority shareholder and then you have to pay them pretty much everything you raised in series a and then the Android guys will come along and you have to find somebody that actually knows Android not just Java like Android SDK and the web is pretty easy to pretty much find someone off the street to make your web application we all know that one guy that will make a website for $5 do it for a fiver then you have a lot of rich users by max now you have to support Mac if you can get in get through all the crazy things Apple put you through and survive that good luck and then these people because they kind of like run 90% of the computers in the world so you have to support them which is the windows people and that's the problem it's like you can already see how different they are the cost the tools they use and they all hate each other literally absolutely hate each other because they all think they're the best that's the thing so if a bus hits a guy from one team that's the end you can't just take another guy from the another team to just to replace him well you know the craziest part they're all building the same product how crazy is that and then this guy gets hired everybody knows the new manager the guy that comes in and wants to see spreadsheets for the past five years that guy gets hired and a bunch of your mates snitch on you because they like I just want to be on the good side of the new manager and what's the first thing every new manager says there is no budget we need water and no budget when here no budget there's no tissue in the bathroom no budget developers never have budget but they have budget for those crazy expensive lunches you know the ones nobody eats and then the office has to eat those ones and he says well we ain't got money you have to find a way to reuse a cross all these platforms now so a bunch of your mates are gonna get let go and you have to figure this out this is you at that point poor you poor you don't know what you're doing okay so you start to think because when we push the wall do we do we think we innovate is there a better more efficient way for cross-platform development and from sorrow you you start to think and ideas come the first thing is every modern device today is capable of running web technologies bingo technologies are relatively easier just to learn and to use like I could teach you how to create HTML webpage in like a day but you probably still be in public static main in Java for life in a month still not know what you're doing web developers are everywhere you could just get that guy that you get five pound and you'd probably do it for you they're easy to find you know and good developers are everywhere to where developers so you start to think why can't we just web everything like doesn't that just make sense you know we can use the web everywhere you know so let's create this fictional billion dollar use case we have this application we want to create you want to support iOS Android and for our grandma and grandfather that don't want to buy a new phone that used Windows phones and then desktop applications we want to make sure it's responsive in mobile web and there's this new thing called PWA you want to do that as well and then we have to do the windows people the rich people that use OS X and those guys are wear glasses for Linux that one great idea right this is what we want to do right okay billion dollar application so let's solve the mobile problem first things we want to achieve we want to make sure we're coding once we have technologies right there's no point of using the web if you're not doing it once we want to be able to access hardware features like Bluetooth GPS and all of that cuz the biggest problem with the web is access to device like five years ago if you wanted to take a simple picture on a web application it was absolutely nuts you have to use this very great smart thing called flash it's very interesting you know you have to make sure the user had the right version and it was a very dark time and yeah so this is where Cordova comes in Cordova is basically it originally should be called PhoneGap and there's a back story about how Cordova or PhoneGap still exists you can totally stock over for that one it's part of the Apache open-source foundation it bridges the gap between the web code and the device teacher so now your web code can actually access the device features Bluetooth GPS accelerometer and all the things that Facebook uses to like you know spy on you it supports all major operating system so Android iOS Windows a boon to OS BlackBerry if you still use one it has a plug-in interface for extending these features so we've solved the mobile problem right well not really why this is the problem the mobile ecosystem they all have different you are SDKs wonderful wonderful you will never see that in any other talk that deserves a round of applause of its own Wow wonderful Java when it's update all right so this is the problem apart from the fact that they have different you SDKs and libraries they also have different user experiences the people that are using the Android users of the room already know which one is their app the IRS uses know which one is theirs the windows people know which one is theirs that's it you automatically Joe snow because you're used to that experience some devices have back buttons Android we have back buttons iOS has one button well actually now they have none because every year they remove something last year to remove the headphone jack this year to remove the button next year they probably removed the screen now will give you the Alexa iPhone and you see all these Apple people but you don't really need the screen like come on how many times you look at your screen man like they would find a way to rationalize it these guys would queue up for three days in the rain for a phone without a screen I promise you that I don't forget the tablets in the phablet you know those confuse phones the ones that hello those you need like five things like throw it and kill somebody with it yeah don't forget those devices so how do you reuse at this level drumroll actually not yet drumroll so this does neutralize a problem this is a native app the negative SDKs give you like you know they give you gestures the webview buttons tabs animations when you're using the native this is the best engineers of iOS and Android came together and said how can we give people a great user experience features so and come on we're not better than those engineers they're really really smart people and they came up with that stack so what user native is like hey I want you to create new furniture by by you IKEA so just you know follow some instructions and just you know sound like do the IKEA thing and in five minutes you're good to go so it's like plug and play and you also have direct access to those guys all those things that Apple and Cambridge analyst agrees to spy on you while on your hybrid application with cord over you have cord or giving you access to that you have the webview and you write HTML code and a lot of people end up with what I call a Franky nap a Frankenstein app because they just take this seventy nine thousand megabyte page and just put it on Cordova Oh No Cordova is slow no you're an idiot that's why and that's what they do so and so writing HTML code is like I want you to make me that furniture box a here's some wood you know what I don't even give you would I say here's a forest go fetch your own tree here's what's or you know what you don't even need the saw create your own sword because that's what we have on the web divs spans primitives tables if you still use them you know things like that and Cordova gives you access so the problem is a lot of people start making their own interpretations of that and we end up with 6,000 interpretations 110 thousand people are saying the same thing nobody's talking so how do we achieve a uniform mobile experience at this level drum roll this guy ionic comes into play exactly let's introduce in ionic what is ionic it is a web SDK for creating mobile applications you will go Stack Overflow 6000 people might tell you 6000 different things it does not get any easier than this it's open source it's completely open source which means it's free you're not paying for it it's free it's built with HTML technologies web technology HTML CSS CSS in JavaScript and typescript you know because we want to be you know gonna be right good JavaScript suppose Android iOS and Windows universal is first classes and I'm not keyword su Windows Universal because Microsoft makes us believe that you know Windows Phone is no more it's just one experience everywhere so they do that so what does the stack look like when you're creating your app you have your code which you write with HTML CSS and JavaScript and then you use the ionic what's it called SDK and that currently is built in angular and that's changing pretty soon but the current version of ionic is built on angular so you can reach out and use any of the angular features and of course everything is inside of your webview which runs in your native container which is why I always say ionic apps are native applications no I'm not trying to deceive you they are the webview is a native component we did not create the webview and Cordova is that cool guy but Cordova is like the best guy he's like Cordova is the one technology that's taking blame for everybody else's mistakes because I Cordova is bad no you're an idiot you're using it wrong and everything you tell Cordova get me a camera sorry get me a picture Koda will be like yes I'll do that for you it doesn't even ask you what device on you it just says I got you it's a really really nice device nice technology so features of ionic this is great so this is a an application built an ionic the same exact code running across multiple platforms so it automatically also adjusts and suit the needs of that particular platform without you need needing to do that there's a powerful iron-icons library built by Ben and it's great great great library free icons more than a thousand of them customizable and configurable because when you're using tools like this you want to know how you can easily configure your applications and stuff first-class here lights whoo gone are the days when we would make a change on our web application we just press f5 and that was it today you need this thing called webpack you need another thing called note some people still use Bower and all these crazy things and to be honest I don't want to do that so the CLI handles all of that for you Sasuke processing transcript transmitter smile and error reporting and supports äôt uses the angular äôt and tree shaker other futures right-to-left support because we kind of forget like a billion people read from right to left internationalization support in multiple languages and as the ionic pro cloud tools who's using ionic cuz everybody wants to know who's using it more than four million apps have been generated 110 plus countries that have communities there's actually meet up to nine so make sure you come through here right here in Utah eighteen thousand slack members actually I checked that number this morning I think it's around nineteen K so you can pretty much go if you don't know what you're doing at work you can find somebody they'll probably do it for you for free on the slack active for room and stack overflow pretty nice thirty four thousand stars and github and companies like Microsoft Airbus diesel Dow Jones et Cie all use ion and these are some of the apps they've built so let's get started enough talk right shall we see some code who wants to see some code there we go okay to get started simply just do MPM install you know ionic start my app is the name of your app and then you have a bunch of templates they give you template like blank tabs Google Maps template or you can just put a get up your URL or somebody that created their template and just might steal it off them you CD and you use the command ionic serve and that's it did it did who wants to see I am the night King okay well maybe I shouldn't have shown that one okay alright so I actually already have and I've literally just created because I don't want to npm install life that is probably a terrible idea so what I'm gonna do is I'm gonna toggle the terminal here and I'm just gonna say ionic lab actually I'm not gonna ionic serve ionic lab actually runs ionic serve behind the scenes but it uses a mobile view you're gonna see this really really cool view and by the way how's the font size all good go okay no Sonny that means something totally different somewhere else let's do this and okay so everybody can see that pretty good so we can see our let me just reduce this so that we can see them a full screen who can guess which one is Android see which one is iOS exactly if you notice I haven't labeled them but the Android people would know which one is theirs I'm who can guess which one is this guy good for my grandma and granddad I haven't written any code yet but we can already see that they're glaring differences the placement of the header the font size the shadows this is what the ionic sdk already does with the mask before you in knows the mobile platform better than you do so that you don't have to do this so let's go ahead and see what we should do so I had this a very very nice server that I have run in which is a bunch of movies that I really really like and it has this so let's go ahead and actually try to use this application so I'm gonna go into the so and this is just a standard angular application here so the first thing I'm gonna do because I'm gonna be making a get request I'm gonna go what do you need to do when you want to make a get request let's see let's test your angular skills what's the first thing you do HTTP client module good ok good and I'm glad the person I set up is someone I actually trained oh nice so we are gonna sunny it I think it's import from an angular forward slash common forward slash HTTP correct and then we have the HTTP client module we have that guy and then we make sure that that guy works by putting him in the imports block so we're making him available across our application standard applet Angela application now we want to go to a home page this is what we seen our home page right now what should we name our application any takers salt spaghetti Oh Jeff wouldn't let that go oh I can't spell spaghetti uh something like that right yeah that one right spaghetti okay good it's not my fault African education people it's not my fault then I do what I always do when I'm working I only which is I go to the documentation and still Brandis great examples because they're better than mine so I go to the framework and I'll go to explore Docs come on I have a demo here Internet I command you to navigate good and UI components and I go to the UI components and I go to cards because everybody likes cards so I'm gonna just go to cards let's see what card I should use and I like the way this looks actually so I'm gonna just copy this card here this bit of this bit of code because I'm very very lazy and I will just put that here and so this is the example here I want to put the name of my favorite movie and the picture and with the I don't need to do that guy so let's go ahead and see that so now I want to go to the home es because I want to make a get request so I would import from no sunny spell from at angular four slash common four slash HTTP and here what do I get anybody exactly the htb client itself okay so I'm just going to say private HTTP and I'm gonna say HTTP client for dependency injection and I'm making a part of my class and I'm just going to create a public property called my films right and I'm just gonna make a get request so let's look at that API first of all let's have a look so you can see each movie has these properties tied so I'm gonna focus just tie to and poster for the image and this is the the API link so I'm just gonna say this that HTTP dot what anybody get and what do I pass URL this guy and I'm just going to say this on this that my films equals that to make sure that the observable nine gets returned this way right and what's the next thing I would do I will just go here and just do an NG like that ng 4 equals there we go this guy ng 4 equals let film of my films and because this is an observable what do I do a sync pipe could we listen in class huh and first thing I want to do is I want to bind this guy to the image and I want to say hey film has a property called what poster and here on the title I want to have film dot I think its title right and I'm gonna save that I think it's title title yeah and now let's go ahead and sea salt spaghetti sauce all spaghettis not rendering something let's see I think I know what I've done I broken yes okay my dev tools is completely hanging now I think I've broken webpack completely broken web pack and let me just make sure I don't have any service worker come on Chrome I'm on a time here I'm gonna clock take your time Chrome take your time okay so we don't have any service workers yes I have broken my build and I'm just gonna do this so to do this I'm gonna restart the build I'm just gonna run ionic lab again okay and let's wait for it take your time there we go and voila this is our application look at that look at these great movies fantastic beasts you know all these cool movies this is the best one of them all Moo give me more give me more if you know you know exactly so now we have this application right so let's go back to the slides actually let's quickly go back to the slides so we solve mobile because we have iOS iOS Android and Windows and we can of course I could just do ionic Cordova platform add and add any of those to like you know iOS and run it on an iOS simulator send it to the App Store so we've already solved that problem but you notice we didn't we're still writing how many piece of code 1 ok good so we've solved those guys next let's solve web now so for web is all about adapting to screen size because different people have different computers there's some people I just don't want to buy a new computer and then these interesting guys that have like these crazy monitors we always have that got one guy at work so it's all about adapting screen sizes consider different input input keyboards some people use keyboards some people use mice some people would use touch because it's web you have these computers that support all of them and do not forget about accessibility do not forget about seriously what I found out the difference between strong and bold it blew my mind apparently one of them is access while the other is not it's like it's listen so do not forget about accessibility very very important let's see that doo doo doo doo doo doo let's take the last thing so actually this is already a web application running because if I actually remove the ionic lab extension we have a web app but everybody hates this guy this guy don't you hate this guy when you go on the web and you see this guy nobody likes this guy this guy this guy needs to go on a diet nobody likes this guy so this is a web application so the one thing we're going to do actually for this is ionic has a great grid system what we're gonna do actually to save ourselves some time is I actually do have another application somewhere here that has that grid so I'm just gonna open that and copy some of that code to save us some time oh great sunny you actually deleted it okay there we go and I'm just going to open this guy here and I'm just going to copy this bit of code here and I'm gonna go back to our own application here so we are just gonna I'm gonna put them side by side so you can actually see design oh you need to do control see sunny if you want to copy I think that's how it works right this is us why are you not copying copy paste voila okay works thank you thank you thank you energy people energy so I'm just gonna take this guy here and do this guy here and so what do you see well let me just actually delete this guy oh just comment I'm out for now and what do you see is I just have a great eye on grid very similar to like bootstrap style anion row and ion column so what i'm doing here i'm saying my default take twelve spaces because it's a twelve space grid based grid on a small device use the entire twelve spaces because on a small device i want to make sure i have only one column on a medium device use six spaces per column so you're gonna have two spaces right on the large device use for space per column so you're gonna have three cuts four times three is twelve on an extra-large device use three spaces so you're gonna have four columns because it's three three three three and if you can't find anything just default back to twelve so let's go ahead and see what this looks like whew so suddenly this guy is much usable now you can see and for some reason if we just start to shrink him down he knows he goes 2 3 4 3 4 sorry I didn't have twice growing up yeah I get carried away easily and let me go smaller too this is more like a tablet or those confused devices you know you see two columns and then if you go back to a normal phone which everybody has like 90% of the world uses you have one column which is great all good right everybody agreed how we can we're good to go now you pay money to use this service wouldn't you exactly sorry and now we go back to the slides don't know but what about pwe right what actually PW is PW is stands for progressive sorry web application it basically means and a web application that can run offline and as access to unlimited storage thanks to the serviceworker it can be installed on the mobile phone it has a splash screen icons like every other mobile phone it runs a full screen thanks to the manifest.json and serviceworker let's talk about a state of offline in 2018 we have sent people to the moon I know cuz I watched the video we have invented this thing called artificial intelligence that would eventually kill us all we've eradicated this disease called smallpox not one person living with this disease anymore this is the best experience you can get when you're offline yes this is the best thing you can see offline a game some of you probably didn't know this was a game this is a game this is the best thing you can see when you're offline in 2018 wonderful we have a guy that wants to send like people to space and create like Hyperloop and this is what we get offline interesting so does the serviceworker work it's a proxy that sits between your app and the server and it praxis requests and responses so it allows you to catch on limited data and suppose push an education and does anybody know what life I means life I is when your phone has two bars and you makes you believe that you have service no you don't have service your phone is confused so it's life I it's line to you you know exactly it's totally confused let's see the demo shall we so luckily this is gonna be this easiest demo because ionic by default actually supports serviceworker so we're just gonna go to the index.html here and I'm just gonna cut uncomment a bunch of lines here and that's it and I'm gonna save this guy and I'm saving this guy and now refresh nothing really changes nothing really changes and I'll just refresh so I'm gonna do something crazy I'm gonna disconnect from my Wi-Fi I told you I was crazy did tell you this could go horribly wrong if you go start me wrong we just pretended nothing happened just you know yeah maybe I should refresh one more time yeah turn off Wi-Fi so we try to go to google.com or something and we can play you can play this guy hey this is no one supposed using my time for and then we go back let's refresh this guy fall hah did you see that refresh again we're still online this is really cool we don't have internet what our app is still running because why when we activated the serviceworker the serviceworker automatically goes and caches all the requests every one of those is a request the api call the images and its cache them so now when we are requesting the same resource as long as the app is concerned we actually went to the server but we actually get in it quicker because no trip to the server so this is really cool maybe misses a good time to actually go back to the internet exactly but yeah but this is really cool so we saw this problem now so now let's sell desktop by the way I can't see desktop I'm Nigerian sorry I always hit desktop it's too late for me to learn so let's stop the next app problem it has a lot of common we web applications in terms of user experience right because we need to use a desktop application you need to sit in front of a computer noticeable differences we're web apps offline is a mosque imagine if you photoshop does not work when you don't have internet just go home it has to work OSS windows and linux all have different UI skins you know in the Mac the close button is on I think the right hand side left hand side and Windows is on the right hand side things like that and a boon - it depends on which flavor you are using you can probably hack it to make it in the middle they allow you to do everything exactly how do you ensure reusability here something called electron exists it's great what is electron electron is basically the cord over 4 decks top that's not that's that's what I call it it's open source suppose cross-platform development use web technologies to code applications OS X Linux and Windows support first-class isn't some electrons app electron apps you already used today that you don't even know slack and Visual Studio code that's crazy you have an app built in HTML which you use to write what HTML that is crazy that's Inception that's deep yeah very interesting so let's see this demo in action alright let's go so to work with um what's the electron you just need to download the electron starter you go to electron github page you have this starter and you just download it and you're on NPM install and it takes like one second I've actually gone ahead and already done that for you guys cuz I care about all of you you know so I actually have this electron quick starter application and I'm just gonna open it here so let's open it here and in electron you have this thing called the main Doge is the main dog s is like your index and it allows you to specify a web page that you want to use at the entry point of the application that's a HTML file that will be the first point of call and in this case an index.html traditionally right so I'm just going to go to our app because we're gonna go to ng so I'm just gonna do back and I'm gonna say ng-conf application and in the ng complication we're going to go to the WWE folder and the index duration because let's have a look at that actually sorry let's have a look at that quickly because over here if you look the wwo der is where the build happens if you're not used to ionic that's like you're built for in angular applications where you have all the bundled and in dere that's where you have the index dot HTML that you want to target so all I need to actually do now is just go back to the electron application and just run NPM start dananananana and voila this is a real Mac application running yeah this is a real so this is not a web app this is a real Mac you can see it has like like I can minimize this I can make a full screen like it's a real Mac so you know what let's that will be cool let's I keep let's toggle full screen on here full screen were full screen here you know pretty cool which is which you know that kind of like the spider my meme you me so yeah I play too much and we still have the same benefits you know you know so this could be like a imagine Spotify running you just pinned it because you didn't want your boss to see it you know or something like that like imagine this was like tinder or while you were working if you just pin it on the side just be you know like yeah and and then as it grows bigger you still have that benefit grows bigger you still have that benefit because some of us have those huge screens and we can do that so we play too much solve that problem look we solved our problem I thought that process was excellent like a chorus you know like fire other things to be aware of capacitor capacitor is is is big capacitor this Bay it's a new approach for accessing native device API that covers web mobile electron all these device targets you should definitely go check it out it's already an alpha or now or beta I think kind of the same thing it's kind of replace Cordover but it's like you can call capacitor functions and if you want a web application it's just gonna use the web stuff so for example like a moto is just gonna use the JavaScript dialogue on electron you use the electron ones on iOS use the iOS ones pretty pretty cool stuff and then you have stencil if you like to build web components and all those things that I don't like to go you build the web component so I can use them I'm over user so do them and yeah this is what's gonna power the next version of ionic because the next version ionic is completely platform agnostic so you can use it with any library not just angular react oh I said that name that you know and the other ones and those guys it's available for play too that you can go to the github and play with it ionic Pro pretty cool stuff you know like they have a lot of things you can use be ploys one of my favorite ones it allows you to update your apps live without going through the app store so you can update your app like really really live and have some talks on that you can check out YouTube package you can do cloud builds because if you want to create is applications you have to buy this expensive device called a Mac and it's like three months rent and if you don't fancy doing that yeah error reporting drag-and-drop prototyping with ionic creator my boat predictions these are my bold predictions PW is will be accepted to the App Store within the next year this is going to happen end of JavaScript frameworks we're gonna start killing each other because of which framework we're using pretty soon people the elves will make it to your Mac Linux and Windows computers is actually already come true because Chrome OS have taken and Windows Windows Microsoft Windows 10 now you can do this you can run on your Chrome OS on your Windows Device so a prediction came through web is going to be the new native when we say in native there's a certain connotation that we added but soon web will have that web assemblies here a lot of things are here web is going to be the new native shameless promotion of course they gave me a stage and I have four minutes I can do whatever I want besides they took five minutes for my time right mad as well so I actually have 10 minutes I'm creating this thing called UI school we teach in what we call production driven design you can go sign up and yeah make sure to do that also at the end of this session I will be outside and I'm gonna be handing some free stuff from and in three months Linda local trials so you can learn about ionic and angular for free and yeah some get started stuff you go to the ionic side electron you can go to my blog I don't really write much but visit it cuz I get paid because of ads and I like getting paid Twitter is a best bet for catchy me like I said if you find anybody looking this cool using my username and it's not me you let me know and without further ado I would welcome questions now because we have some time yes so I I use the ioniq a lot but what I didn't know is how you pulled up that ionic lab and you were displaying all three platforms so could you show me how you ran and launched that ionic again using lab yes so you know um so they're normal you know how you run ionic serve you just run ionic lab instead yeah just ionica lab yeah that's it you're good to go it runs served behind-the-scene can you talk a little bit about the scheduling for when you're leaving angular and moving to web components cuz web become components still aren't fully accepted right that's already happened has it it's already happened so that's what the ionic II built stencil for and with that they were able to build all these platform agnostic components every single one of the components is platform agnostic so central stencil is what powers that stands is actually kind of a big deal and so that's already happened the new version of ionic ionic 4 is being heavily tested as we speak it's it's probably you can actually go and head and play with a beta already and that's pretty cool because now you don't have to be angular specific everything every component just works out of the box regardless of where you are so you can have a ionic component working anywhere now yes so what about those of us that were planning to go from our angular apps to ionic is that said yeah no so I'm gonna still support it so ionic itself currently is built with angular but now the new version ionic is completely built with stencil so basically those components now you just be using ionic this thing we use like say material design library it's just gonna work wherever you put it without being opinionated so for you actually that's a great thing because now you don't have to worry you can just integrate your current application just call ionic components yeah we've got time we still got five minutes six minutes actually can you talk a little more about this acid or for native device features and the support that will be ongoing for Cordova native device features yeah so capacitor completely replaces Cordova if I'm being honest because there's no need for it it brings you closer now to the to the native layer but it's not just only mobile specific it's also capacitor is a one way one size fits all for just web mobile and electron so now it with a capacitor if I call like something like get me geolocation right if the device is on a web it's going to use the web geolocation feature if it's on iOS it's gonna use the iOS one if it's on electron you use the built-in like geolocation feature of the computer but you don't have to worry about that code so I saw like it takes is like elected like Cordova on steroids but we are the bad things that Cordova has pretty much yes so it is really any performance hit because you you're just using the same code you would normally use if you were using capacitor and you working on a web device you'd be calling the same geolocation but if you have to support another platform you'd have to write another code for that but capacitor already has that code for you so there's no performance hit anybody it's just giving you a unison if that makes sense so we can take a couple more hi Peter you said the page is cached yes so what happens if you click on one of the images and you're redirected to the next page it would work or it would not work yeah so let's say my app supported that it's going to work because remember when you're using the cache is not really like a browser cache this is like local it's cached on your machines actual storage service workers work they have a different life span to the machine your app can be closed the serviceworker is well working so whenever you request an image right it's a request to the server that gets sent well when you have a serviceworker that's cash that already it's going to look into your cache first you can program it say hey look into your cache first and when it does that he's just going to return the cached version not going to the service so regardless of whether you have 10 pages or you're not getting or not that's not a problem you're not connected to the internet is just going to get you what you have cache which is much what you but you have control over that well one key thing about serviceworker caching with most serviceworker implementations is their proactive so with like network cache to cache something that's already been requested and loaded but serviceworker will it will load things ahead of time before they've been requested so that's how it's already in the cache so we can take one last one right there one more there one more okay I think we're good all right all right you very much ng-conf pleasure was all mine thank you thank you son

Channel: ng-conf

Views: 12,307

Keywords:

Id: imaTBx4jbwY

Length: 47min 1sec (2821 seconds)

Published: Thu Apr 19 2018