Bestand wählen
Merken

Interactions Design with Ember 2.0 and Polymer

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
and in the in the in and I think there was so much for having me here they're really excited to be here and to really talk about so the exciting integration working on with Amber 2 . 0 and you will follow a project that might get a little weird to be getting that probably not as readers that but as a so the goal at the end of this is to empower you as a developer to give your users experiences that they've never had before the
so right now there's a lot of turmoil in the Web landscape seems like they hate against the web has been ratcheted up to an all-time high level and constantly hearing things like when you start with the dollars for with slow and fundamentally flawed java script is lot into the failure and the hybrid mobile accidently garbage but once again below the
Web seems to be falling into this classic underdog narrative but as we all learn from popular culture never underestimate the underdog for example all
virtuous triumphing over so we different obstacles erotic he was produced from
Jamaica making it to the Winter Olympics for bob sledding and didn't win but it was still a pretty awesome movie and of course the greatest underdog story of all time a classic in the eyes of history's greatest scholars baby from Dirty
Dancing she finally males the dramatic list at the end of the show because nobody puts Baby in a corner let me huge believer in the way but the web
browsers the largest application runtime of the world and will just continue to grow every single device the matter what is has to be connected to the Web tablets phones TVs cars smart appliances Internet of Things are you be developing native applications for each different platform as a user I want you watching TV what I wanna do something out want you to download an app in order to do it I just 1 of probably a web browser and just handle it right there now as we believe that web-style engineering skill sets make way too much business sense in and inevitably will prevail In by with data say where performance is definitely on the rise of Web 3 words and toolkits are getting closer and closer need a performance every single day this is browsers and in need of some overlaps the still there's still a ways to go but new advancements such as I was WK web you and I would say the rendering engines for each channel 5 and jobs significantly increase performance and things like web components need web components and the web innovations API are offloading a lot of the heavy lifting on the native browser code freeing up your main job a script privacy and also significantly increasing performance In hybrid out of a bad reputation but use the right performance interlocking pieces you can build the light from overlaps of Web 2 and yes they have
applications to be incredibly fast special interview where only few during heavy gaining evolving complex custom behaviors but what I'm most interested in is using the best most productive tools for the job at and and the fact
remains that Web tools are starting to get really fucking awesome I you have to have her head so what my core philosophy is 1 of the things that I that I tried ask myself every day is how can i is 1 person with a laptop leverage my time as powerful as I possibly can every minute I dedicate work and is also goes for small teams a large companies they're broken up into smaller teams how can you be as productive ineffective as you possibly can with limited time and limited resources and how to get the most bang for your bot infamies answer standing on the
shoulders of giants the way to be able to do truly extraordinary things with limited resources is to build on the work of brilliant people and help a shared solutions and community initiatives forward step by step so I think in the best of were
Paul word and material designed in order to do something I do really think was possible but I prove myself wrong 1 late-night so here
today to share with you what can come from a bottle of whiskey in in a crazy idea is something that what I said back really think about it kind of makes me giddy like like Ron Swanson here and makes you feel like a little kid sitting in front of a christmas tree about for rapid present on Christmas morning so write down the
calling and calling this approach and flow inevitably a paradigm shift for web interaction design is an innovation approach that bridges the gap between application states providing a sense of context and clarity of purpose as you move through that experience so show you a quick video that shows off some of apps that they're working on with this approach recently the so
it it it so it and that it and
theft
and and
and thank
you thank you thank you
thank so and thank you thank so there's a few things of Award no recently of course it's a dramatic pirate music her for mass effect but so so what you just see
what what you just saw was an integration between member and polymer the shift web outflows from jarring state-based click pop click pop interactions to a continuous flow through was smooth navigation in no break in the user experience so the user has a sense of context focus and clarity of purpose as they move through the act as a was like the concept of suspension of disbelief when watching a great movie so interesting thing happens when building up with this approach and then taking out the center the transition To me it starts to feel like a broken experience so I get the same feeling now when I go from a client rented out to a server rendered up the server that starts to feel like a broken experience so once you start adding in these kind of peaceful inter-state transitions it starts to get really tough to go back so the goal really is the blur the lines between the the web to create such an immersive experience that you don't notice what's running what what is whether what is needed for us now is begin some of the techniques as possible so when components why should I care about when components what is the difference between every component in a polymer components and we will use each and how can I use web components to be more productive as a developer data dead yeah so with the web components that you actually extending the browser itself which you think about is actually like pretty pool of polymer components actually extended base component that acts as a convenience method but we'll talk more about that later so whether components also give you encapsulation so it creates a kind of a walled garden were no JavaScript and CSS in Blida out unless it explicitly pass through a was also this declarative nature of reading through an app in understanding the structural intent and what the developer was trying to do from just the market itself so you're defining your own HTML elements and you're hiding its internals which also gives you this nice separation of concerns it also when implemented natively gives you true reusability and portability across all absent and that different frameworks so in terms of when use polymer and when you gemba awhile of them the the 1 somebody developer productivity as a talked about before and the allows we leverage my time is partly as it possibly can those was amazing conventions and gives me a lot of happiness even though course pisses me off a lot of times I'm sure everybody in this room is a 1 point in this stop Lamba Amber Amber data or something along those lines the develop ergonomics never conventions are better than I've seen in any other framework was also a brilliant community as evidenced by everybody here and around the world it's contributed to this project there's so many smart people dedicating so many nights and weekends this it boggles my mind also the world-class routing state management after number of iterations Amber finally nailed the router pattern and we no longer have thousands of lines of code routers with all every single possible the state defined uh hello Google's a polymer material design projects were constantly pushing the web for and bridging the gap between the browser API as of tomorrow and be able to use them in in production after that also want to talk a little bit about the web animations API something that I had a lot not a lot of people are actually like talking about using that much but it combines the best of both worlds of CSS and JavaScript animations of chrome actually uses the same rendering engine to render CSS animations as web innovations and web innovations 1 outside the main thread so the accelerated by the GPU which frees up here in Java Script bread for all your application functions was also things like motion passed the animation grouping a more granular control which are not really going to go into it today but at a level talk grown on that 1 but it's really exciting stuff should definitely check it out so now we're a
demo of a super basic example of amber polymer binding to the same property value
so 1st let's define our our polymer component of on the 1st line we define the component name which is pulsing circle and actually use a coloring duration so that we define the template of 1st our CSS styles and if you look at the background color property but it's actually a familiar look it's that the double mustache curly braces that each 2 Nowozin in words used and then we have our market which is a super simple just but did classical circle in style of and in the ready section below it starts to kind of look like that make the job a script version of every components from inside the polymer block so we have a duration set to a default value of 20 200 and we have the ready block which is very similar to the mindset element and so then we set a default color blue with this style color we grab the circle in the shadow with this Dodge Shadow preselector for circle on n and this is how we use the Web innovations API once we have that this circle died in May and were taking the opacity from 1 down 0 both the same time transforming scale from 0 up to 4 times its original size which is in this case 400 by 400 so basically fading out and growing at the same time I and then we set down below duration to iteration defined above but we draw on a little bit easing panic holes and give it a nice feel of and then we said iterations to infinity so which is constantly loop so the
now the the most basic of thing that I could come up with was a a simple member input box bound the value bound to encircle color and then we instantiate are polymer component which is pulsing circle we set color equal to the same of the same value which is circle color so now with 2 lines of code so if you see as we as we take in different colors it basically lied changes the color of that closing circle so the data is flowing from member the amber bound at tribute of down into the polymer component and it's changing that background color style of this is all happening in real time have
you right so for next demo we're gonna rev it up a little bit and play around with polymers coroneted pages component another thing that it just kind of blows my mind that not many people are are kind of talking about this using it that much of so in this case would be take image and break it up into 2 different states of what is a small version of the image aligned flush left but against the screen and the next version is double the size of the pushed over about 3 pixels to the right and so using coronary pages were going to move from from the 1 state of the image into the next and correlated pages will handle this animation and 1 image will morph into the other 1 and just by setting a single at tribute of a single value it will handle that dynamic transition innovation for us so well 1st we set up a
mock up so we have a core innovative pages of container component with the hero transition of your tradition across prostate transitions fine we also of the selected atom you they were gonna set with each HTML Boston properties and the correlated pages component requires this child elements to be wrapped in Section tags as you can see so this is and it is quite a bit pages whatever section tagset child elements of it will select whichever view is active based on that selected action you which is that the child index you yeah and so now for a little bit of magic is you see on so inside the section titled the day of pure 1 thing he to we set the hero ID to panic and you see you see this the same hero ID in both so we set the hero ID it informs polymer forms of coordinated pages what were doing that a juror transition on odds we said a little bit of CSS were deciding 1 thing for individual pixels of in just making a flush left but the next image is double the size pushed over to the right and then we just have a couple simple Amber button components on and all they're doing is setting a selected value to 0 or 1 and so that's
receiver we click this in its smoothly animates from 1 state into the next day just by hitting so so what's happening is setting that value the selected values 0 1 it's going in the corner the pages corner many pages is then selecting the correct child element and and then it's itself is taking care of the entire tweeting transformation for it so this is this is actually pretty cool
so for demo number 3 we're gonna build off what we just did in our last demo in applied to interrupt transitions so I'm not go over all the code because we have limited time but but I've open-sourced the demo at you can see up on I get help dot com slash feelings like and it has all these these techniques of working in an old demo the AP in a little bit but you can go on there and play around the code so this a little bit about my
note the but so were defining Apollo Rowlett Apollo well that's a helper that injects a container of you in the handle the child abuse the plugged into it and behind the scenes we override certain features of Obama's routing functionality in order to delay the destruction of the outgoing you until a coordinated pages out and the callback fires so we're sitting up or else below below that as you can see and some kind of a little happy type thing as I said before coronary pages needs its child elements to be wrapped in Section tags so here were defining each view that corresponds to a rout of were sitting the tag name equal to this section are equal to section and so
this this might be a little harder to see the code but this is a this is a what the card components and so here of which you have might be a little bit hard to see that you can see if you check out online on defining a dynamic hero with HTML boards it is bound to the unique ID of the model that has been passed into it so what's really cool is now once this is all set out all I have to do is define a QID on whatever elements that I want you have morphed into a different element In 1 component and do it in the next component and it will magically take care of this information for us so
now we do something really stupid and tried and this on an iPad so bear with me for a little bit
as I get this up run so this is actually a of see here so this is an embassy alike auto of application but it uses a i West WK web you so this is all amber polymer and and there's no optimization there's no anything and so we're gonna see you this actually works by I
still so this is on iPad a and were kind of going back and forth as you can see prudence
smooth so for lot of the annotators saying
that you can get the same type of performance other members and Paul the more on not in any court over which the codebase is actually that that get anyway but so there's lots of room for
optimization in this the as if anyone has a favorite part 2 right character they can call this a real quick excite April is island
hopping in Thailand there was fun but anyway it can see their really smooth animations back and forth Running a new style on iPad of using Web technology with no optimization so the devil increase the performance of a few so thankfully that works 50 Snyder to get back to the slides here check
of that was wrong but
another yeah OK arms like I said
this is a work in progress and actually just pushed it up last nite at like 3 in the morning so I I want do a lot more fun things with it but I just kind of ran at a time and so it it runs great on I was right now so it's strangely and runs great on safari where it's going through poly filters is so far doesn't actually support these type of innovations yet but these are actually supposed to run native on prone but chrome it's really good you for some strange reason so the ways on that the Chrome core team of the polymer team that I have a couple questions for you and would love to talk with you so they are not annotated even the co right now as I said but it is up line and you can check it out
so come back to you like what is what is the dreams stack at least for me is ever for routing high-level architecture and translating user intent and meaningful state manipulation and and data persistence I really love that about polymer layout bread so this is something else that a lot of people are talking about but it's built on Flex boxes the concise declared structure and this is this alone I think is is worth using polymer for that love every component in polymer components usually using Amber components for more complex data structures and color components for specific small markup things or to give functionality that at that ever components don't give like for example this automated pages of uh component becomes the polymer the and polymers greater gives all these all these different of wonderful Pauli fills in any work really hard on these these are very difficult engineering problems so things like shadowed on certain template in the components were true encapsulation of the Web animations API and they basically allow you to use tomorrow's technology interaction today so ever going forward what it what I can
see it as the continuing evolution of Amber allows you to build web apps with tomorrow's leading edge technology today it doesn't lock you into its own ecosystem but more and more especially with HTML Melbourne's allows you to take advantage of innovations in other frameworks and ecosystems and provides the most powerful in same way to blue everything together if and that kind and
on this concept of community so last year I showed up as actually 1st conference ever I I should appear to know a single person but was really kind of nervous thought everyone would like not like me and because stupid but but showed up and and it was an incredible community on pure users that tweet from Caspar who I don't believe this year this year this was a 25th of March 2014 of and we're sitting there like having drinks and late-night with metal a lot of great people and it was it was just incredible experience for me to come to a 1st had conference meets so we amazing people and it really possible way my expectations and and the fact that I'm pure a year later on stages is attested it how often this community it's so I had I like that you know I think everyone out there for that and
thank so you have with community like you know just a couple of the the thoughts of so what what are the people that you've met in these last couple days the relationships that you build that they can change the course of your life is it is it has my life and what are the ideas it'll change the way you think about yourself you know capabilities and the community momentum around you we've seen so many incredible things you're anemic often I really hope that we take some amazing things from this and especially these amazing relationships as we go forward yeah so looks like I have a little more
time so but my might just play a demo with higher again are you my mind
and
I think that
we would be in
the in the in
in in in
a in a in a
a for this really like this they figured everybody for putting on the back of the whole and reporting for all of our work you guys you everybody here today around the world that's contributed to this project but it's really amazing event and also of 2 on the weights would like this said the code for that I don't know but it also works in the browser not prone to but supported is appointed of the complex feelings would we should fix the problems that but also and that sigh with 1 voice of if anybody wants to work with leading edge technology like this but we're hiring and we want to work with you about the speed of whatever it is you guys like the British soldiers come up to me and talk to me if you talk about this for you know the pages so what everyone thank you thank you it is a a a a a more
Projektive Ebene
Softwareentwickler
Integral
Benutzerbeteiligung
Korrelation
Applet
Klassische Physik
Skript <Programm>
Sichtenkonzept
Übergang
Benutzerbeteiligung
Klassische Physik
Mailing-Liste
Browser
App <Programm>
Kartesische Koordinaten
Maschinensprache
Systemplattform
Komplex <Algebra>
Code
Benutzerbeteiligung
Prozess <Informatik>
Skript <Programm>
Zusammenhängender Graph
App <Programm>
Datenmissbrauch
Zusammenhängender Graph
Rechenzeit
Browser
Rechenzeit
Internet der Dinge
Chipkarte
Thread
Menge
Framework <Informatik>
Tablet PC
Topologischer Vektorraum
Wort <Informatik>
Ordnung <Mathematik>
Chatbot
Benutzerbeteiligung
Notebook-Computer
Inverser Limes
Notebook-Computer
Speicherabzug
Schreib-Lese-Kopf
Leistung <Physik>
Netzwerktopologie
Wort <Informatik>
Kombinatorische Gruppentheorie
Ordnung <Mathematik>
App <Programm>
Stellenring
Interaktives Fernsehen
Bridge <Kommunikationstechnik>
Kartesische Koordinaten
Aggregatzustand
Kontextbezogenes System
Datenfluss
Kontextbezogenes System
Videokonferenz
Benutzerbeteiligung
Programmierparadigma
Datenfluss
Expertensystem
Aggregatzustand
Verschiebungsoperator
Abenteuerspiel
Soundverarbeitung
Softwarepiraterie
Ruhmasse
Bit
Demo <Programm>
Punkt
Natürliche Zahl
Browser
Applet
Datenmanagement
Iteration
Kartesische Koordinaten
Bewegungsunschärfe
Element <Mathematik>
Übergang
Komponente <Software>
Stetige Abbildung
Client
Datenmanagement
Deklarative Programmiersprache
Mustersprache
Volumenvisualisierung
Kontrollstruktur
Skript <Programm>
Router
Gerade
Verschiebungsoperator
Lineares Funktional
App <Programm>
Softwareentwickler
Glättung
Volumenvisualisierung
Biprodukt
Kontextbezogenes System
Rendering
Server
Benutzerführung
Projektive Ebene
Aggregatzustand
Subtraktion
Kontrollstruktur
Gruppenoperation
Zahlenbereich
Interaktives Fernsehen
Geheimnisprinzip
Term
Framework <Informatik>
Code
Graphikprozessor
Benutzerbeteiligung
Bewegungsunschärfe
Vererbungshierarchie
Thread
Zusammenhängender Graph
Softwareentwickler
Mobiles Endgerät
Parallele Schnittstelle
Demo <Programm>
Cross-site scripting
Trennungsaxiom
Zusammenhängender Graph
Browser
Fokalpunkt
Datenfluss
Gerade
Integral
Thread
Computeranimation
Gamecontroller
Geheimnisprinzip
Benutzerführung
Bit
Quader
Kreisfläche
Mathematisierung
Versionsverwaltung
Iteration
Abgeschlossene Menge
Element <Mathematik>
E-Mail
Code
Loop
Benutzerbeteiligung
Iteration
Prozess <Informatik>
Abschattung
Skript <Programm>
Delisches Problem
Zusammenhängender Graph
Integraloperator
Default
Gerade
Zentrische Streckung
Kreisfläche
Kategorie <Mathematik>
Template
Zwei
Klassische Physik
p-Block
Ein-Ausgabe
Echtzeitsystem
Elektronischer Fingerabdruck
Wort <Informatik>
Garbentheorie
Kantenfärbung
Bit
Demo <Programm>
Sichtenkonzept
Pixel
Diskretes System
Kategorie <Mathematik>
Gruppenoperation
Versionsverwaltung
Betrag <Mathematik>
Element <Mathematik>
Menge
Homepage
Komponente <Software>
Bildschirmmaske
Funktion <Mathematik>
Automatische Indexierung
Rechter Winkel
Garbentheorie
Speicherabzug
Zusammenhängender Graph
Brennen <Datenverarbeitung>
Korrelationsfunktion
Bildgebendes Verfahren
Cliquenweite
Touchscreen
Aggregatzustand
Demo <Programm>
Bit
Gruppenoperation
Zahlenbereich
Transformation <Mathematik>
Element <Mathematik>
Code
Homepage
Twitter <Softwareplattform>
COM
Ganze Funktion
Demo <Programm>
Aggregatzustand
Lineares Funktional
Multifunktion
Bit
Sichtenkonzept
Diskretes System
Routing
Element <Mathematik>
Whiteboard
Code
Chipkarte
Homepage
Demoszene <Programmierung>
Informationsmodellierung
Garbentheorie
Funktion <Mathematik>
Datentyp
Virtuelle Realität
Zusammenhängender Graph
Garbentheorie
Information
Gravitationsgesetz
Ordnung <Mathematik>
Benutzerbeteiligung
Bit
Minimierung
Kartesische Koordinaten
Lineares zeitinvariantes System
Demo <Programm>
Abenteuerspiel
Reelle Zahl
Minimierung
Mereologie
Datentyp
Rechenschieber
Benutzerbeteiligung
Minimierung
Open Source
Filter <Stochastik>
Arithmetische Folge
Korrelation
Datentyp
Benutzerführung
Speicherabzug
Gerade
Demo <Programm>
Umwandlungsenthalpie
Zusammenhängender Graph
Architektur <Informatik>
Quader
Beschreibungssprache
Template
Web-Applikation
Gebäude <Mathematik>
Interaktives Fernsehen
Geheimnisprinzip
Abschattung
Komplex <Algebra>
Framework <Informatik>
Homepage
Datenstruktur
Computeranimation
Evolute
Farbenraum
Zusammenhängender Graph
Computerarchitektur
Datenstruktur
Aggregatzustand
Videospiel
Impuls
Korrelation
Mathematisierung
Impuls
Demo <Programm>
Abenteuerspiel
Gewicht <Mathematik>
Browser
Projektive Ebene
Ereignishorizont
Homepage

Metadaten

Formale Metadaten

Titel Interactions Design with Ember 2.0 and Polymer
Serientitel Ember Conf 2015
Autor Langslet, Bryan
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/34736
Herausgeber Confreaks, LLC
Erscheinungsjahr 2015
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract You've heard the hype about web components, but what does the spec provide other than small, re-usable chunks of markup? Web components provide an incredibly powerful and declarative way of structuring web apps. The Polymer platform in particular holds many hidden secrets, including a paradigm shift for interaction design: an animation library that bridges the gap between application states, providing a sense of context and clarity of purpose as you move through an app experience. We will show you how to leverage the power of Ember 2.0 and Polymer to create remarkable user experiences.

Ähnliche Filme

Loading...
Feedback