Bestand wählen
Merken

Creating fluid app-like experiences with Ember

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
and this pattern of the
this then in fact the if
you use the new I've my name is nick
I flew all the way from the Netherlands to bring you this talk I ran a small Web development company called web of wire with a friend of mine and am currently finishing my computer science master at the University of 2 and they define and get up on Twitter my own websites so I'd to start a side project 6 months ago and I wanted to create an and in the browser which felt as much as a native app as possible I took an experiment approach to this is a new node was possible yet and so on and it was creating apps those things and when they grew enough I put them into separate adults and I'm going to show you today what may be kept so 1st things 1st I initialized as a new member of course I installed some of my favorite tools source and which just to get things going quickly and then I thought what we actually need to create an app like experience so they're so a few basic you are elements and that's most at like toolbox Baltimore top master side menus especially on Android they're really common things through which you can then and then also the pen gesture support that black transitions that's a really important part in the actual experience and scrolls that management so then I started looking into the American system of course I open grammar observer and took a look at what's actually available 1 of the most important things by instilled 1st was a gestures which is a gesture wrapper around the handy yes that just a library and it provides easy integration for what For gestures in amber components then of course we all heard about it yesterday animated and for cool transitions and then I took a look at a few of the sidebar add-ons available a burger menu was 1 of the most well known ones have been didn't really provide what I was looking for it has some basic gesture support where you can swipe to open but not actually direct a menu is actually 1 that does that but I discovered it too late and it didn't support or is it I had already sold a few problems in my own at all which would still be there with this at all so the 1st component I created was a tool were component that's usually have either a fixed to talk at the bottom or both and and the rest of the screen is then filled with a scrollable few ports and where the continent of Europe is visible the vast can be in the context of base so that when you animates them into a new context the bars and made with the plates Deligne Rouse this is a little harder and during my experimentation I found that using the body as the scrolling elements was the most reliable way to actually implement these bots and this means the barge mostly position fix which later brought along and your problem which is actually a limitation of C is a standard covering this and the UK and that standard is that a position fixed elements within an element which has cheeses transform is actually not relatively to the window anymore which completed the forced the purpose of position fixed because it's now not stick to the top of your when anymore so this means we must actually defined these bars hyperplane all so we can prevent this as we like to at cool animations which actually use transform to the pages so the actual components I created a rapid components which manages the bars you can yield a wider to promote a lot from this wrapper components what you get is then this you can see that it's a little different from the other a version of the scroll bars actually covering the entire viewports where the rapper real adjust its spacing and to accommodate for DOS-based Bastarache up so that your content will always be visible and then there's another cool feature which mobile last and can have in apps which I also supported over and that's actually the the bark out to heights knowledge role and comes back and a few immediately when you scroll again but as you can see in the the of you can also use of the collapsible hate of the tool bar so that you can create the more new like thing where only the top or collapses so the menu states if you all the time this also works for the bottom Bollenbach and works in an inverse way so when you scroll down that will collapse to the bottom then on to the side so this is actually a very common way to new menus in websites sites you get hamburger button in the most annoying position possible and the menu items are also still in a pretty hard for that to reach place man right this is actually pretty nicely they hold on the menu items are a little bit so you can reach them easier the menus of full they'd scrollable menu on the left side of the right side and there's a mosque which closes the menu that is when you also has a gesture support so you can bend from the edge to open it and you can only menu to close it so if you start a band the mask will not actually trigger the action until you reach the other side menu and you can of course also swipe at with a high enough velocity to order close or open it and this again is a wrapper components and from which revealed the menu you can asking for aside both have left right our supported the system before and then also
an extended a link to component is provided which closes the menu when you have a transition to a new rounds then how does the edge spend recognition work because our agrees actually defined hype and also the entire element will get a band recognition events and yeah that's what I did was check if there's any menu to find out what it's open or not and if it's not then attend the edges and check whether whether on the bands starred event is within the edges and then said active and now those of you without a with an iPhone might think I already have an it's just in my browser and it's true and this conflicts of the browser planned to go back causing some very funky behavior and unfortunately we can't use edge gestures in the I was browser so we have to detect them when we are in about environmental wireless the band to go back just is actually disabled any when you add the app to the home screen so we can use a user agents which is nice at all to actually that the IRS environments and then use the window the Navigator notes stand-alone property which is so far in specific to detect or another we are running from the home you now when we had this to our then start events that it won't trigger and I was in about the environment as for Chrome and Firefox that is similar work-in-progress standard school display mode stand-alone which you can also use to detect a stand-alone browser then finally what you get is this menu as you can see the family friends must closes the menu Maxim is the pain and it is actually the most complex components I created and it has they're left to basic features I wanted to support so 1st of there's the at the blood components through which you can ban you can put arbitrary content in the templates this does mean you cannot ban between rabbits so the best we can do here is you scrape parameters to actually keep the states of the types and then the other thing I wanted to do was a pen between resource rights so you have rods like in this case a post-rout when the template is the same but only the model differs we can actually band between those then the components for the there there is again a wrapper components which manages the entire components you can yield and navigation from its which I will show later and then put in the pains in the scholar you can add the title which will show up navigation and educand and there the incident things work a little bit differently you provide a previous model a in mobile and the next model utterer of which fight in the previous and on the next model can be no and then that's it's you can now then between rounds and then I had an idea of that there's actually another way we can use this a carousel is basically set of planes with limited interaction and time change so we just need to add a simpler indicator with westernized knots which follows the band and movement and then use the famous American currency to The task yielding of time out of 5 seconds and and changing to the new pain we start this task when we inserts the components and then when the user interacts with it we interrupt the task and when I'm in the mouse leaves on it detects and we restart the dust again and now we have a carousel then I was like the day everything works I'm going to play with this birds and this is a new problem showed up as you can see here and that's not good and I was like no I'm we're going to have yeah we've all seen restart my events luckily for me this is actually when the brother worked with me there's actually another face in the whole inference system which is the capture face and servers down and all to the element that on which the event happens and then you get the nobel face which you probably all know which then handles the events we can actually use this capture face Let's member works often will face so we can't use events and would gesture so unfortunately doesn't support and the capture face so this is when I thoughts no no but what do we do now and this is actually when I started to write my own band recognizing so I could make use of all this so basically what is a pen recognition which you need this basically touch events which are supported by all modern browsers and units on each stitch Avenger needs the corner that's the angle the distance and the velocity of the movement so we want to enable the capture phase optionally because usually you'd still like to use the mobile phase for example when you've nested things or whatever and and we want to provide a locking the service now back to decide when you we will implement this new band recognizer and this is the heavens through mixing we enable the capture the the capture events for the side menu and then we will claim the lock on a filler that span so this way there will know no penny events will happen on any other and using look for and now everything works as expected this also enables a nested the brains so what you see here is actually a higher level then multiplying with the menu of top and a this carousel and which will
seamlessly flow over into the the band thing when you reach the edge and also know the navigation of thought it follows that gives the active item and if you so you've always knows where he is and the indicator morphs between
menu items then the next important part transitions with animated that's why do we want transitions Boeing use correctly transitions will enhance their perceived responsiveness of what and will also unconsciously are consciously inform the user of the context using this is an example transition I've created which is inspired by OS and what you see here is that the title of the previous page morphs into the back button and the new title flies in the new will also slide over the old way kneel plates slides away slightly now this is where I thought the mobile transitions follow around here key and cold text in a predictable way so we can observe this into a components so just to remind you all and this is what the normal Emerods directly looks like we have posts and page for single post an enterprise and what you'll notice is that with each new issue go 1 level deeper or we can actually completely obstruct the transitions away so I've created a mobile page components and this combined this where for out transition direction using an application rock mixing it will select a matching transition effect and it'll managed basin viewports style during transition which is you might think it also manages the scroll states currently supports horizontal transitions between similar level of things pages and the transitioning down in transitioning of their of the in the near future will also supports a switch into and out of tax or to a new poll text this is basically the animation you get when you create a new post for example and then the page flies of from the bottom the top tool bar functions in a similar way and to the mobile page and it's also a component I created this is meant to be used in a top tool bar and it provides the civil amber elsewhere portals to which you can sense left buttons titles right buttons and the 2nd row of cold and in the middle case and the navigation and this combined transitions all the same base the same rules as the mobile page component now managing scroll states for the school said we can actually use the rather and as it's it's quite clear how school stated works in mobile apps it should basically get restored when you go in when you're going in the RAO security or sideways and get a said when you go back down and but we use document-based scrolling and with all these transition elements it's actually quite hot to to measure scroll state as a transitioning elements are not actually scrolling elements so during transition and the scroll of the Buddhist size was actually be limited to prevent anyway scroll moss appearing during the transition and we apply this scroll state as its users transform during this transition in only reduce memory scroll memory scroll or Amerada for all which are too well known Netherlands to manage the sprawl states that in this case we can't and so mobile base remains that's by itself as you can see the scrolls that gets properly applied and restored as we go back and forth the incident smaller components has a similar approach but it uses its own as school said management their responsiveness and so with few tools we can use to create to to make responsive and the Web Science there's responsive and which you can defined a set of break points in this case i've defined the default who served for and break points and you can then your templates as and this check to see it to render something only on mobile for example but this may cost flicker when using falsehoods as falsehood is not actually aware of the screen sites that you have Buckley
Decimal approach and that's this uses media query sure you probably all know both of us some useful utilities to find out to to apply styles to the different break points and the philosopher mutant to class we can use notice in an example of a year the settings menu and this is the index rather the settings menu containing the items and this is then NS a brother if something's pp this is probably not what you'd like and they're still there's a lot more space you don't want to show just the menu with a few items so how are we going to solve this we can move this settings menu into a components and render it only something's index throughout as well as the descending fried and this talk and then you get a the page as shown on the on the slides but we cannot actually use the savings of Annex rather more or less self so we'll have to redirect users when they're on this topic we can again use the responsive utilities to do that and then transitions yeah we put in those positions this said doesn't really look nice home-distilled terms UltraVision's don't work well on this stuff so would have to turn them off now we can use responsive to disable or modify these transitions and so I created a computer property checking whether or not transition should be enabled and then in templates just disable the computer animation if we're not along then final remarks and we've seen a lot of breaks progressive web of oriented things on this conference and those are of course very important when creating a mobile at you can add splash screen cycles offline availability and native notifications and the at the whole of creation and then there's also hybrid apps for which this will also work really well this basically means you would be to an installable what few then the final of things you need to keep in mind and you must keep of or it will likely run into some problems when you're following the fault the default right style and as you might know Moldova looks walk the walk rendering and this is also the visual transition and mobile it's not really nice when you click an item have to wait a couple of seconds then the transition happens it kind of makes the experience that's there there some great resources how to apply a concurrency based patterns to make the model who facing or a user loaded blurry components to asynchronously load the data I've put links to these resources in in the demo I propose then I can this 1 in that too it's quite important it might also nicely finish your recalled bingo it said the swelled list rendering a rendering takes a lot of time and especially during transitions performance may suffer wonderful of items on-screen sexually Red Adleman called vertical collection to improve from this situation then there still find FTNS environment so this is the finished at plan as can see we have these side when you here we can throw it around and have to Council and when we moved here if our Our nested pages within the animations visual critical states so I'm actually completely on the other side here you can see the innocence finding in action and you can actually just that it's for all this and navigation bar I'd made no modifications there that's just this which a scrollable Hairer D. Anderson thanks and the Settings menu I showed before then it's all completely
responsive so you can try this yourself I put them up a line be sure to do so a report any glitches and C D 4 as I've shown that was also called diversions on get have and and that was it thank you very much this then and you
does that that and that this fact then the
fact that you have the fact that thank
you yeah the new the
and if you do this you it happens to you
Bit
Browser
Formale Grammatik
Versionsverwaltung
Element <Mathematik>
Raum-Zeit
Eins
Homepage
Chatbot
Komponente <Software>
Gruppe <Mathematik>
Minimum
Mustersprache
Bildschirmfenster
Metropolitan area network
App <Programm>
Installation <Informatik>
Quellcode
Kontextbezogenes System
Gruppenoperation
Twitter <Softwareplattform>
Projektive Ebene
Cloud Computing
Ordnung <Mathematik>
Standardabweichung
Geschwindigkeit
Web Site
Ortsoperator
App <Programm>
Gruppenoperation
Digital Rights Management
Abgeschlossene Menge
Kontextbezogenes System
Homepage
Data Mining
Benutzerbeteiligung
Knotenmenge
Lesezeichen <Internet>
Wrapper <Programmierung>
Hyperebene
Programmbibliothek
Inverser Limes
Luenberger-Beobachter
Zusammenhängender Graph
Inhalt <Mathematik>
Informatik
Touchscreen
Trennungsaxiom
Indexberechnung
Elektronischer Datenaustausch
Physikalisches System
Sichtenkonzept
Verdeckungsrechnung
Integral
Videokonferenz
Mereologie
Binder <Informatik>
Minimum
Web-Designer
Retrievalsprache
Einfügungsdämpfung
Bit
Inferenzmaschine
Element <Mathematik>
Browser
Datensichtgerät
Versionsverwaltung
Familie <Mathematik>
Element <Mathematik>
Sommerzeit
Inzidenzalgebra
Übergang
Komponente <Software>
Einheit <Mathematik>
Gruppe <Mathematik>
Bildschirmfenster
Speicherabzug
Phasenumwandlung
ATM
App <Programm>
Parametersystem
Motion Capturing
Kategorie <Mathematik>
Winkel
Template
Ähnlichkeitsgeometrie
Programmierumgebung
Marketinginformationssystem
Mustererkennung
Ereignishorizont
Motion Capturing
Dienst <Informatik>
Navigieren
Rechter Winkel
Datenparallelität
Phasenumwandlung
Server
Benutzerführung
Programmierumgebung
Standardabweichung
Aggregatzustand
Geschwindigkeit
Ebene
Zustandsmaschine
Gruppenoperation
Interaktives Fernsehen
Unrundheit
Dienst <Informatik>
Task
Informationsmodellierung
Morphismus
Wrapper <Programmierung>
Datentyp
Mobiles Internet
Inverser Limes
Zusammenhängender Graph
Abstand
Indexberechnung
Inhalt <Mathematik>
Ereignishorizont
Knoten <Mathematik>
Vererbungshierarchie
Default
Browser
p-V-Diagramm
Binder <Informatik>
Sichtenkonzept
Datenfluss
Satellitensystem
Ganze Funktion
Mustererkennung
Benutzerführung
Retrievalsprache
Router
Morphismus
Demo <Programm>
Punkt
Element <Mathematik>
Datenparallelität
Familie <Mathematik>
Kartesische Koordinaten
Computer
Element <Mathematik>
Inzidenzalgebra
Raum-Zeit
Übergang
Homepage
Richtung
Komponente <Software>
Korrelation
Mustersprache
Minimum
Mapping <Computergraphik>
Rechenschieber
Visualisierung
Kontrollstruktur
Portal <Internet>
Default
Einflussgröße
Inklusion <Mathematik>
Lineares Funktional
App <Programm>
Kategorie <Mathematik>
Template
Computersicherheit
Mobiles Internet
Volumenvisualisierung
Abfrage
Ähnlichkeitsgeometrie
Kontextbezogenes System
Matching
Rechenschieber
Kritischer Punkt
Hierarchische Struktur
Dezimalsystem
Funktion <Mathematik>
Menge
Automatische Indexierung
Rechter Winkel
Festspeicher
Programmierumgebung
Aggregatzustand
Orientierung <Mathematik>
Subtraktion
Web Site
Existenzaussage
Ortsoperator
Klasse <Mathematik>
Gruppenoperation
Digital Rights Management
Automatische Handlungsplanung
Transformation <Mathematik>
Term
Homepage
Hypermedia
Benutzerbeteiligung
Informationsmodellierung
Arithmetische Folge
Rendering
Endogene Variable
Morphismus
Zusammenhängender Graph
Integraloperator
Cross-site scripting
Touchscreen
Soundverarbeitung
Zwei
Softwarewerkzeug
Indexberechnung
Einfache Genauigkeit
Schlussregel
Mailing-Liste
Binder <Informatik>
Ordnungsreduktion
Schlussregel
Computeranimation
Hypermedia
Dreiecksfreier Graph
Mereologie
Unternehmensarchitektur
Binder <Informatik>
Verkehrsinformation
Datentyp
COM
Klon <Mathematik>
Quadratzahl
p-Block
RSA-Verschlüsselung
Sommerzeit

Metadaten

Formale Metadaten

Titel Creating fluid app-like experiences with Ember
Serientitel EmberConf 2018
Autor Schot, Nick
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/35709
Herausgeber Confreaks, LLC
Erscheinungsjahr 2018
Sprache Englisch
Produzent Confreaks, LLC
Produktionsjahr 2018

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Mobile apps have UI patterns and features not often found in (mobile) web applications. We will take an in-depth look at ways to enhance user interaction for responsive Ember applications without having to develop a completely separate application. Topics include application organization, templating concerns, interaction patterns, relevant addons and a display of newly built Ember addons to fill in for missing interaction features.

Ähnliche Filme

Loading...
Feedback