Bestand wählen
Merken

Going Progressive with Ember

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
and the and in the the this follow and demand that I'm here is the of a review of them out to them with Amber today
and I work at why words we do some some people can miss it then and we basically work with wealth and the right now and we come from you away from home explaining their retirement and
so the star and let's let's see what a progressive about based to the finish and In ideals man's
words of progressing well optics and that's when you technologies to bring the best of mobile sites in 18 up to users they are reliable fast and engaging and they originate from a secure origin hello regardless of the worst states and wish to care someone may be asking so I had in this year I was vacationing in New York and I just want to know all the training times
so example justice everyone of
and I got this screen and FileShare most
people have seen this going at some point and I don't actually want to the load of every at like in some cases I'm just going to be using the web for a couple of days so maybe just once the and is not the only case right here I
can I can use this out so this is not so bad but it still last into the low something even though the web is thoroughly usable from a mobile device the view were
here at last summer can't tell me it would actually talked about this and 1 of the in the community was going to be doing to improve the mobile web and what we can do to use this and that screen that I don't want to see anymore it's is not the only reason we should care about improving on the web on mobile devices
most of the trafficked nowadays come from cell phones so like almost 70 per cent comes from all devices so making contract work better I think it's a safe bet here is so going back to
what a progressive well up is and what how we can make 1 1 of the 1st point is that has to look good
I rise and this is fairly straightforward the nowadays most where to look good they are responsible if you try to find examples of side that is not very good while especially hard to find it but we can do well some small things to improve this the 2nd 1 will be there at I could be used on the life of 1 of the differences between the web and made about his native apps are accessible through the home screen how we can also achieve this with a well the work of wine I think this is 1 of the biggest differences are made up the they don't completely work when you don't have an action and the spatial something the load and they show up and there is no I would get on the web but we also have ways to achieve this would a web app and the point the performance perhaps as it would also go and still some people prefer name because they work faster than Web the the lowest error
with Phillips here and have a native
trolling Web troll I'm going to be using this as an example and I have my progressive troubled by and you can check the co-leader did have if you look at they don't look really well under the eyes there's not such a big difference there is basically the difference where you can get flux Williston answer says that's not so hard so the main difference here is now marked so that the only 1 that the only thing saying on the 1 on the right is not a native of but we can change this the we're going to between this in
and also how we can make our ap installed on the device of guessing the experience on cell for this we're
going to use the app manifest so we have 1
that is basically adjacent file with a set of variations in for instance we can tell name of our description the thing color in the background color and the icons and browsing is going to take this information to make the experience there for users so here I have my up before
the of my that's if I save it to the home screen I just get a generic icon that doesn't say much FAO ILO the up again I still get in the chrome on the
browser so you know it's not that after I had the manifest area see some change was born I get the icon there once again the name that i want and 1 l and again I get a splash screen so getting there already had
lose the now so at this point These look like in a about there's not such a big difference and this in take much effort except that only Crohn's aboard
the up if you but if you think it's not so bad then this bear a we do have ways
to get the same result and IIS it just need to town add some media types theory to your HTML yields of give the icons the name the color here is
my answer on media so the economy and mindful without the stats it's there is an android at least facial animation on my have and I still see on the browser here after I had made at times I get the icon that I want to get the name that you want and it again the I loosen up part so we
get interest spheres of that manifest which is the suddenly information the this is how
you can do it on window if anyone Mrs. word and also some media types and configuration file making that information is the same in every case the a caller's name but since we're doing and
we're here you don't have to write the file we have an ad for this and with and the balloons solely on in an atom intuition file going to show you the is
similar to this app manifest and by the end of itself chase up the Jason file the made times so you don't have to and support case and this is for itself for yourself this is how imagine it will work if the Uniface was supported by every browser in just 1 of the file something here we've seen a
small change so we can make 2 outstanding then look more native and make things install experience there so we can have the x and the 1 on the home screen but we need to see how to make are at work of line for the shape shape to 1st the work of 1
here in England the airplane all I have my updated on the screen as a splash screen and then it's a dinosaur so if we know this is the only difference the
and so on and we're going to use the service workers how many people here have used or pair of service work but yeah if you get a happens that is not so new the so what I wanted don't
ask work is basically a script and he runs in the background you declare on your page and it gets all the with the patient is the browser and you in the background so doesn't block the UI thread and analogy to stuff even if you're interested in something else on the screen you just need your web page to reopen the author can write and manager said disclose and it doesn't the user to actually do something and you can plot of actions and here we have
the life cycle of service worker what happens after is still in a browser there's self few on events so we actually care more here the 1st is installed and this is after your service what is going on in here you can for instance a low you're at a sense of identity and later after this element is not everything works you get your service worker activated here you know you of this work is running and think this is the 1 that we Karim also basically your service to work is going to act as a proxy itself where we request you cite makes it is going to go through the service worker any case it was simulated to actually decide what to do without question if you actually want to go to the server that so 1 thing we could do that they
said it save all the assets of your on the Solomons so I can know all the it's the analysis as the images that I need and save it on my device and will have it from now on so even if I'm not lying can still show that it would be something similar to a dollar in your native up so we can get the results of the cell so it intercepts every request so here we can for instance catch all the sponsors where side it's making we also can check if the network is similar not every time something from the catcher retire any default response Oracle straighten worked it gives off a lot of flexibility to make up your mind but I'm thinking since in runs in the background of this and require a up to be open you can do some stuff even after it is so close to the web site 1 of the things in bringing 1 day and if you have on new stopped for instance you can download the latest news and then notify the user because we also have access to push implications here so we can get the latest information whose chocolate mitigation just like a made about us no more stuff I ageable is developing service work is also adding more support for the all the API is that it is going to give us a lot of our our to meal to the stuff from the web that we will lead to native before and yes we
answer for it so you don't have to write down the cold for your within you good bye you don't have to and this is a good a start both islands achieve the same result they just take a different approach so you can be the you like more and the service word-pair takes on applicable approach so the basic out just registers the service worker and coordinates all the atoms and yet on top so for instance up to this point I just have a serious worker but it's all have my up working applying if I add working days and that's attached I have all the assets from I have hatched when the service workers themselves after and I have one's theory have to say if I am a Flanagan at this show the HTML and CSS but you still need to handle on the case for the other in the rest of the request like the content and and we also have an the I don't actually can bake but this 1 is the basic 1 where he basically way that this is the net work all failed the retirements when you have on the catch and it also captures what comes from the network so that the user has access to your site once he will be able to of the scene where he already stopped last time on the promise that it can have enough flavor status theory minutes and it's true yeah I don't you can also the same thing is takes a different approach you can we need to give configuration file so by default just based on the and you have your assets cash if you had
in period configuration you can name all you're you want to have a cash on installed so they're going to be available always also a happens when and where failed fails you can have some asset that it's going to be returned always mindful and you can also name all the Ural thing you want to go to the server 1st and then if that fails you can return something from the cash there all the alternatives also but the the basic ones so here's my out
before the service worker where remember here's my and after the service worker Ch
so as I have a connection and still seeing this thing that I saw on the last Thursday of a man so that this working applying here is that the and
few
you have if you did it candidates again and so now it's only Chrome Firefox Opera and found found support service workers at has it in development but so far I have and we don't know if they will and when they will tho my units and solution for this if you're
thinking of not supporting users have they do represent like say 2 per cent of users worldwide and in the US they are the majority so we can't just leave all these people hanging
In the
so let's enter the application cache think every 1 of our most people have heard of it on so is the old and so on not so fun brother that thing and but it does work on every browser so
is this a spread if you want to have your up working offline the the so for
those that don't on all the obligations that you basically yeah and manifest file and you name all the requests and assets that you want to have hatched so 3 axes at once it's going to be on your device St. you also have to name all these requests and answers that you want to go straight to the network so the difference between application taxidermist workplace the service workers way more flexible things this allows us to decide what to do on each request publication catch you just have word to catch on the network you can the world and if you
have an an arm abruptly manifest and what it does to install it MIT faulty will generate a manifest that it captures all your assets so of research the analysis that images are going to be on the couch but you can also
add more for giants into you can say which files you don't want to have on the couch which Pfizer not on your assets and you do want to have on the couch so it is with our our up working of line on most devices but we still need to to
decide what to do with users I want to create something so for instance in my cello case if L 1 to grade a card and it's all have connection I can't now because the way the Web works he would actually go to the server load of solutions for these 2 we can use the local search this is basically a key-value store on the browser it seems just string so it's not recommended for large states of the nice more for preferences but we also have Web SQL an index to the and chemical orange balls hound so well skill and the in the exterior of to save more data on the browser help of forest is a library from us another rock 3 so case your browser doesn't support index me he will save your information to local search and 2nd the and yes we have items for so and then invest and although storage and up to increase and maybe add up to a for a local storage so you just added to your app you choose which models are going to be same with this laughter and the information is going to say on the browser so you don't need a connection for for this local foreach there's something scenery centers using local practices of local storage so up to this point we have a way for users to create apart and say that and I think that there's no action by you need to decide what to you afterwards when the user is back online how they stand this information to the back to the server when these 2 solutions we need to implement that our part then about India and about is also why and really add up to a new cis pouch the being that is also a wrapper for indexing the good thing is that if you have constant on your server on the sun or skill database the thinking is provided for you so you don't need to implement everything there is already a single solution place the so up to here
we can have our looking there will much effort we can improve the experience when is also and vise and we can have our up working of the so we're adding to the experience of produces 1 but we still have to do something about the performance so
fellas let's compare however out became here and I have I have made the
trail and I have my progressive trouble on the right so both of
you on load kind of instantly and we see something on both cases but many still shows my content way faster and so we do have ways to optimize the it's a little bit so the 1st thing we we need to see the 1 there is how that's a lot of page and the fast on the 1st round so before I say it on my rights since we are using a member of the user is not going to see anything until amber loads and actually renders here side but there is another way to whom to change this so for instance we can chemically
fast with we can have our Haparanda and server-side any making users ask have JavaScript enabled or even if JavaScript takes too long to load it going to see something because we're giving the HTML 1st screen bound to arise and you just have to be solid it's fairly easy but you might have to start optimizing some other things since you are entering a sin all you have to wonder about this effect and the images but in a way to improve the 1st round the for a
2nd page render actually what we have done to this point does help because we already have our acid stayed on device you won't take that long to go back to that word in dollar everything I so it should be faster the segments and attempting to action as well we have already heard and there is a large framework and users might want to be able to use that until the all the JavaScript downloads and gets forests so we have to figure out ways to reduce the size of the task and 1 way to do it is missing and the engines so end is not only meant to reduce the size of the just is found for mobile devices basically 0 it allows you to composer up into smaller parts and would lazy loading you can be sure that you're students and all the holy outrageous screen adults just when he's accessing at the time and once you 98 1 hour out it will all the chairs for that wrote if it's another so with this we can make sure there are happy if it's a lot gets and smaller pieces and use it in the telescope size is going to be reduced the we do have
some tools to help us in developing progressing ups and 1 that is very good
taste like how this is a common extension
here is how it words you in
Europe Asia and it will to lieutenant tests and Europe forward
so this is the report I got before I added many of the social so just mentioned on before having the manifest beforehand and service worker so my at this not very progressive and basically doesn't work of line loads are too slow and there's more information may also thus in this city you and I can when say screen
after I R you of manifest and the service worker and the cash if I run my house again theory sees some
improvement here so my at works of wine and Newton on the vitamin D. so I can buy you see the red haired that says spatial is not fast enough the and I said that we could
improve this was possible Tsallis check if we actually do see some improvement here and
as we do now we went from a series certain and when a name so the 1st meaningful paint on gets green now it's faster because we're giving a signal but we still have a time to interactive then it's not so brilliant from let's see what happened when
engines the bad news this who had experienced right at the engines would lazy loading and would don't work to better right now and so on the advantage of fighting engines for this case there was a lazy loading cannot be used here up to this point and people are working
so here is what happens if I just have engines would place knowing they don't have high school so in the western Deadwood experience the 1st meaningful paint is not so good so in this case it might be better to just have a hassle so going back
to the initial dream of not seeing some libraries site estimated although they're out I think it's possible to improve the
experience some although users and I'm not saying that we should do it shouldn't do any out I'm just saying that we don't need to line up for everything and it is then a you'll have you still can prove years has experience like the 1st I am affiliation to add and they give you a very experience for the web it's possible to do it with camera today we do have some solutions and intervals working on improving them and can't get better so as I was saying fast wooden engines are still needs some work together and there's also stuff that we can do to improve this and as i showed most of the jump here has been done many community so and anyone can help even if it's just using this knowledge is so make sure all browsers feel like they have to support it so in the helpfulness
thank you thank you and the of my
and live in
Videokonferenz
Rechter Winkel
Code
Wort <Informatik>
Computeranimation
Wellenpaket
Datennetz
Mobiles Internet
Mobiles Internet
Wort <Informatik>
Ideal <Mathematik>
Technische Optik
Computeranimation
Aggregatzustand
Metropolitan area network
Chipkarte
Benutzerbeteiligung
Punkt
Rechter Winkel
Last
Filesharing-System
Computeranimation
Touchscreen
Benutzerbeteiligung
Sichtenkonzept
Mobiles Internet
Computeranimation
Touchscreen
W3C-Standard
Punkt
App <Programm>
Web Site
Graphiktablett
Computeranimation
Design by Contract
Videospiel
App <Programm>
Subtraktion
Benutzerbeteiligung
Punkt
Installation <Informatik>
Last
Taupunkt
Gruppenoperation
Web-Applikation
Besprechung/Interview
Fehlermeldung
Subtraktion
Benutzerbeteiligung
Rechter Winkel
Zellularer Automat
Fluss <Mathematik>
TVD-Verfahren
App <Programm>
Bildschirmsymbol
Elektronische Publikation
Computeranimation
Datensichtgerät
W3C-Standard
Spezialrechner
Deskriptive Statistik
Menge
Client
Bildschirmsymbol
Kantenfärbung
Information
Instantiierung
Whiteboard
Flächeninhalt
Fahne <Mathematik>
Browser
Mathematisierung
Besprechung/Interview
Benutzerführung
Bildschirmsymbol
Touchscreen
Axiom
Subtraktion
Punkt
Computeranimation
Resultante
Typentheorie
Browser
Mereologie
Zwei
Hypermedia
Client
Winkel
Statistische Analyse
Humanoider Roboter
Kantenfärbung
Bildschirmsymbol
Kugel
Datentyp
Hypermedia
Bildschirmfenster
sinc-Funktion
Wort <Informatik>
Information
Elektronische Publikation
Konfigurationsraum
Computeranimation
Spezialrechner
Browser
Besprechung/Interview
Elektronische Publikation
Datensichtgerät
Shape <Informatik>
Mathematisierung
Besprechung/Interview
Installation <Informatik>
Gerade
Dienst <Informatik>
Subtraktion
Dienst <Informatik>
Touchscreen
Autorisierung
Videospiel
Proxy Server
Browser
Gruppenoperation
Digital Rights Management
Besprechung/Interview
Element <Mathematik>
p-Block
Web-Seite
Ereignishorizont
Homepage
Homepage
Dienst <Informatik>
Dreiecksfreier Graph
Nichtunterscheidbarkeit
Server
Skript <Programm>
Skript <Programm>
Thread
Analogieschluss
Instantiierung
Touchscreen
Resultante
Web Site
Punkt
Besprechung/Interview
Zellularer Automat
Ordinalzahl
Physikalische Theorie
Eins
Demoszene <Programmierung>
Benutzerbeteiligung
Endogene Variable
Default
Konfigurationsraum
Ereignishorizont
Bildgebendes Verfahren
Analysis
Caching
Synchronisierung
Datennetz
Strahlensätze
Installation <Informatik>
Default
Konfigurationsraum
sinc-Funktion
Elektronische Publikation
Dienst <Informatik>
SOLOMON <Programm>
Information
Instantiierung
Wurm <Informatik>
Dienst <Informatik>
Emulation
Server
Äußere Algebra eines Moduls
Konfigurationsraum
Frequenz
Eins
Einfach zusammenhängender Raum
Dienst <Informatik>
Einheit <Mathematik>
Browser
Softwareentwickler
Versionsverwaltung
Benutzerführung
Computeranimation
Implementierung
Metropolitan area network
Caching
Internetworking
Caching
Browser
Besprechung/Interview
Browser
Familie <Mathematik>
Graphiktablett
Kartesische Koordinaten
Caching
Subtraktion
Dienst <Informatik>
Datennetz
Trägheitsmoment
Wort <Informatik>
Kartesische Koordinaten
Elektronische Publikation
Computeranimation
Gerade
Bildgebendes Verfahren
Analysis
Stellenring
Punkt
Browser
Gruppenoperation
Wrapper <Programmierung>
Gradient
Informationsmodellierung
Benutzerbeteiligung
Wrapper <Programmierung>
Programmbibliothek
Speicher <Informatik>
Hilfesystem
Einfach zusammenhängender Raum
Automatische Indexierung
App <Programm>
Wald <Graphentheorie>
Installation <Informatik>
Datenhaltung
Stellenring
Speicher <Informatik>
Einfache Genauigkeit
Chipkarte
Zeichenkette
Last
Automatische Indexierung
Mereologie
Server
Information
PCMCIA
Zeichenkette
Instantiierung
Aggregatzustand
Bit
Weg <Topologie>
Last
Rechter Winkel
Volumenvisualisierung
Unrundheit
Computeranimation
Homepage
Instantiierung
Homepage
Caching
Sinusfunktion
Soundverarbeitung
Punkt
Wald <Graphentheorie>
Atomarität <Informatik>
Gruppenoperation
t-Test
Unrundheit
Dienst <Informatik>
Framework <Informatik>
Homepage
Task
Mereologie
Volumenvisualisierung
Wort <Informatik>
Booten
Touchscreen
Softwaretest
Wort <Informatik>
Ultraviolett-Photoelektronenspektroskopie
Maßerweiterung
Computeranimation
Caching
Dienst <Informatik>
Last
Bildschirmsymbol
Information
Physikalische Theorie
Gerade
Verkehrsinformation
Computeranimation
Schlussregel
Normalvektor
Touchscreen
Wurm <Informatik>
Domain <Netzwerk>
COM
Volumenvisualisierung
Booten
Extrempunkt
Benutzerführung
Computeranimation
Normalvektor
Homepage
Unabhängige Menge
Punkt
Makrobefehl
Mehrrechnersystem
Computeranimation
Unabhängige Menge
Web Site
Domain <Netzwerk>
Elektronische Publikation
Konvexe Hülle
Mixed Reality
Computeranimation
Homepage
Wurm <Informatik>
Mailing-Liste
Programmbibliothek
DoS-Attacke
Ruhmasse
Normalvektor
Wechselsprung
Benutzerbeteiligung
Browser
Besprechung/Interview
Hilfesystem

Metadaten

Formale Metadaten

Titel Going Progressive with Ember
Serientitel Ember Conf 2017
Autor De Barros, Samanta
Lizenz CC-Namensnennung - 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.
DOI 10.5446/33638
Herausgeber Confreaks, LLC
Erscheinungsjahr 2017
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract “Mobile internet usage surpasses desktop usage for the first time in history.” Headlines like this are the result of a quick Google search for mobile vs desktop internet usage statistics in 2016. So, what are we doing to engage those mobile users with our Ember app? How can we improve their experience? Let's walk together through the process of building a PWA, what makes one one, why are they important and how can we reach to the Ember ecosystem to aid us in our work.

Ähnliche Filme

Loading...
Feedback