Bestand wählen
Merken

Hijacking Hackers News with Ember.JS

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
in the in the in the in the in and the and and how and I how powers flush right the free of you like that the rest sleep for enough but I'm Gottfried very happy to be here today you can buy me on the Internet as a chink in code I am a cofounder
consulting agency covering elsewhere in Europe and Canada but if you need help with the Rails app or amber apps or and the training probably have you know I'm speaking of tender OK I recently became a
canadian so if you think you was that was agreed on was a Greek untreated being of course I was a really long process but by the end of the process and basically get Getty goes the judge and he handed me my citizens of citizenship certificate when the arch
of my hand he told me that now that to me and and I'm in the face of a nation and I should always look out for opportunities to promote conditions and the values that we believe in this is a this is a responsibility that they very
seriously and as you can see that that's Conan O'Brien they're doing his thing and up there in
the audience that you might need flight I so I figure no 1 really wants is an important part of lunch anyway so if you don't mind I would just use this time to push me canadian agenda on as you probably realize the median programmers are often under-represented in the poem community and this is not because they're your few Canadian programmers quite the contrary but I it's because they blend and so will the Americans around and you usually notice that there but this is
no coincidence of course and Canadian spent a lot of time learning about American cultures and values this is at the TV show that we used to have it's on public television and it's a 100 per cent we would called talking to Americans to just it is properly if you don't believe me and look it up on you to and so I think it's only fair that we spend a lot of people live at time learning what canadian and Canadian culture and learning about differences so they can better understand each other so this is a great example
to example what the differences in the values of countries this is how you report temperatures in America of thoughts and you probably are familiar with this but for those non-Americans among us at and for freedom and then of course this system is called the degrees of freedom this makes a lot of sense right have and in Canada this is how we do it but obviously this C stands for Canada and I because everyone else around all those of American use the same system you use usually just say 0 it's 11 degrees and you understand it but if you're talking to an American there's just 1 extre clear you can always say it's 11 degrees in Canada you probably heard of the expression of forest now you actually know what it means
a similar differences exist when it comes to if you want store boolean variable would probably do something along the lines of its empty or is loaded in Canada we prefer to name them and the voters and if you happen to be a Ruby programmers made the library to make that is your you you can get that by running the gamut thought Canada I think you realize most of you are just as good programmers so you probably don't know what Ruby gems are and I was told that you can run this command alias aunty and them I to be honest I have no idea what it does it in some sort of compatibility layer a yeah I don't really understand yeah but I try that work for me so anyway I hope to learn a little bit about 2 medium programming and we should probably get back to the lecture talking point permanently banned from this conference and I'm pretty bad when it comes
to you need things and when I was preparing this talk I had a lot of trouble coming out get title from a talk in fact 1 of the feedback organizes the muon submitted the proposal is some along the lines of 0 I think this could benefit from a better title so I I figure I would take some history inspiration from 1 of the most popular site on the internet so I thought maybe
only talked 3 terrible acts to remember the wall or I
perhaps but the sign pattern we should embrace gas or perhaps more simply what scholars
on this slide and so on naming inside what I actually
wanna talk to you about today is adapters
and for those of you using Amber you might be aware of this thing called is that after but that's not what I'm referring to specifically to when is it that there really mean the generate concept of adapters something that you might cold-adapted having the idea is actually pretty simple
let's see the bottom Beckham clean air that has 1 of these freely history and unfortunately the socket yeah at home is all too late all was to cut so to use this this LeCun thinner and home you would need to put an adapter in between them In this case the doctors being pretty truthful functionality like basically 2 wires in their right I but
in other cases here adaptor might need to be a little bit more leverage when Apple released the lightning cable and they realized he would have existing stereo systems hold that is still 1 use so they need to make an adaptive now this or that there is a lot more complicated than the 1 on the previous slide and these ports have very different specifications and be completely different calls 1 of them is the knew reversible and so you can just think the wires and the court could be however in terms of functionality available perfectly capable of accomplishing the same thing which is streaming audio from the iPhone to your stereo system so add whole what Apple did is they basically put a little computer in there that encodes the signal on 1 hand and transform into something that you added and we understand and it's a pretty elaborate hack that it works pretty well in practice
so what does that have to do with programming well let's say you just acquired a sensitive measure the current temperature and unfortunately this driver is programmed to report temperatures in the canadian scale and the system expects temperatures reported in the degrees of freedom away so of course in go ahead and write Oracle break but so whenever it is whether this is a feasible idea not really depend on how heavily invested in your code base for example it probably the make lot of sense to you we wireless sockets just use a vacuum cleaner I sold as an
alternative you just random adapted for it just like the real world that there that the article would expose an interface that the consuming and expects and internally would dispatched these requested from the object that is rocket now this is pretty much the whole idea of an adapter and you probably use this pattern many times where you're consciously aware of it not so the show you how would apply this pattern
in the real world and in member apps particularly I would like to show you side projects that I have been working on are
um or so this
is how I can use you might be familiar with this that is not it's basically a website that you can post links to you and other people can vote on them and the terrible comments I and so it is for the cutting-edge in terms of design and functionality for
web said this building nineties I noticed grow for a commons and that's pretty much all OK so
what I did is I wrote uh and from extinction so when you go to
you and I knew left seamlessly take
over and and if can find the
cursor in maybe click on the links OK so you click on that and I will show you the article and and you can see the comments and you can for them to hide them and stuff and I was told that there's ambling somewhere on on the front page but can really find it on their gets that anyway that's that's extension of model selection the uh right so you can switch different filters that's pretty not interesting but what I'm going to do is to prove that this is
actually running on life data and I will submit this this some extension to Hacker is right now and OK that's life wonderful long it's chamber but get up but 0 slash can reader I was show that later but let's
see later submission that were produced
yeah and some of it's up there against media got banned or something
so anyway we'll come back to later later and hopefully we can check on your computer maybe maybe you can see it on you know moon was OK and finally this 1 last thing right and this is completely
useless things but it's for equal to show let's say that here so as you can see there's a preference for on how you will want more things to be hidden by default I'm not and so if I slide this slide there you can see that synchronizing that between all the screens and it's actually rendering the comments on the and see that I'm is actually rendered at life on all 3 tasks so yeah I guess is not very useful but we will talk about the implications later so that's it for the
Tamil let's get sites right OK
so if you want to check is my did have accounts politician dash reader I'm so I hope you like them all the time while that's a pretty cool Amber at from it's what does that have to do a bit of a pattern right well in order to build a
news reader you would have to 1st get data from somewhere somehow normally you would just talk in API and I will send you back on and you would be able to render those days on page dynamically from and this is what Member data would expect as well but their fruit there few problems 1st of all I'm at this time and it at a time service project had isn't really have an official API and so I have no servers to talk to I also use 1 of the unofficial API spread on it's hard to tell which of them were still maintain or how reliable they are they also have all the functions that you can find on the web interface so I can't give thing I wanted to do and lastly can build own API but I was way too lazy for that I just want to get to writing from an ad and don't really want to maintain and right server-side component for this
but so if you take a step back and look at a hacker news website you realize but actually all the data you possible in the tour ended up pages already on here because you basically use you know picking elements from here and transforming into different of representation so if the infection HTML page from server you just parts of the data and turned into juice on the the or whatever you want great in fact this is how all the unofficial API works they just have a service and requested items over operational page in the parts of the beta out on the server side and it's send you back Jason but so since my extension runs in the Hacker News them in because it's taking over the hacking of website but we don't really need to go for a server for this trouble we just make an AJAX call this a effect fictional page passed the data locally in the browser and turn it into something that Member data would understand and
that's exactly what it this is us some pseudocode issued idea basically you know make an AJAX college you get the shimmer page and then you run it through a nation a and we extracted elements that you want From there you can build the Jews on the that you wish you had have now I should warn you articles I show them on the slice of pseudocode so don't copy this and try run it it's unsafe and just look at get up the the actual think that now that we have this some data and it would be great if we have a way to store a locally and to use it to render plates well now of course and amber world the people answered you got this data but every data is really designed for fetching data images on NPR it so you can't possibly work or some the leverage like this that might have been true for embedded year to go but up to have data is actually very much just a local object store for a model data and that it actually make you assumptions about where the air coming from and how you're fetch to of the bastard this
expect your data source to Jews on EPI that behaves according to a certain specification but yes so if you're API haven't checked other boxes on the list you can just plug it in and it would just works but still VAP Edison behave exactly like Ambady expects or in my case if you're source isn't even PPI at all but it doesn't mean that you're out of luck from every data perspective from the thing on the other side is really just a the source of some sort some of the biggest source is something that can provide it with the right data in needs at the right time and on so all you need to do really is to drop an adaptive between them to help them talk to each other this is of such a
common pattern in such a common requirement that every data has actually built built in support for this and they're property if the adapter and you start to realize the class and I can't get into too much details but roughly the adapter is responsible for fashion data in the server so making the AJAX call for example and the serializer is responsible for interpreting the data and assigning them into the right shape that emanated expects so if you implement the right methods correctly now when you do you this bookstore find stories and everything is in you know what you use these adapters and serializes to fetch data going to the workshop on and the adapters us evasive you have any questions about this before you should probably go talk instead but also the 2nd problem with it right so that's a data from the 2nd problem I ran into is euros now and you probably know
that embryo is pretty OK needed when it comes to how you should structure the Urals for page like this usually have a slash for application round and
if you have an 11 page would have stories segment and then the
real story ideas segment for the panel on the right and then finally the last outlet a bottom for the comments have you have such comments for does so the router API actually offers some flexibility to control how you on these things named I but in general you would have 1 segment for each of the year-end into and it can bully deviate too far from that before you feel like well like managing all of things myself finding framework a lot so this is a perfectly reasonable signed by the default and it works great for 99 % of things that you crawling build however in my keys I my extension is to maintain a 100 % neural compatibility with the Hacker news website because like Computer go to new tho I commented are commonly extensions can take over if you're houses and look the same as the original 1 then when they share it with the friends it's not going to work when they click on a link from Twitter or something that is not going to go to right place so that's not in next to give you an idea of
here are some of the Urals have work on the left is what I would like to do based on members of opinion euros and my UI nesting on the right that's the equivalent the you're Alfred equivalent page on Hacker News today so you probably
saw it coming let's throw in an adaptive this come on 1 hand we have the Hacker News euros on the other hand we have amber outer and we just have to put in a battery in between make them talk and what is not obvious though is where you would drop this adapter and what that after would look like it might help if to take a step back and consider what actually and what Amber is actually doing with the euros you think about it the euros is really just a waiver amber to serialize the current state of the application when you 1st open at members can be serialized state from neural and figure out where should go 1st and is used actors can update the URL so whenever you refresher should go well that's going to go to place with that in mind something that we need adoption become more clear but we actually want to do is to adapt on how Member reason right these uncivilized beats and from there we can probably trick amber and seeing a different neural than was in the address bar is it turns out where once again not
alone in solving this problem of the box Amber actually has the support 2 types of locations on the sets of URIs the first one is the called the history URLs which is like the normal year old but and the other 1 is the hash URIs for older browsers and to
support the type of heroes member once again uses that that the pattern and these 2 mechanisms are encapsulated into classes support occasion hash location and and exposing uniform interface for the rest of the stacked to consider this great news because we figure how Amber has an adapter for this we can probably spread on adapted for our needs as well so so as you can see this is very simple basically we defined it all Informa neural which and reduces to fetch that you're of from the ATIS far from the hash in this case we just call super and now we transform the neural internally according to mapping and when Amber tries to generate a link when the culture when you use the link to helpers in India and a worse than plates members gonna call for material and turn that you're into right format before putting it in the H href attribute of the attack that generates so from yeah because Member really has the support these 2 euros schemes anyway once we implemented this correctly everything just works across the stack and to be honest I'm a little surprised by how well this work well because probably no 1 else uses the location adopted for this purpose but but I think that's actually a great testament to the power of the adapted pattern by slicing things at the right boundary at the rate abstraction you could connect to work seamlessly with use cases that you have never imagined when you world original called but it's finally up and running a little bit long time sort of go from this 1 for the quickly if you remember it should attract where sliding the preference slider or 1 time changes from being in the other tests well I'm the problem I was
actually trying to solve things that I would like to sort of preference in local storage because I want them to persist across process sessions and and all that and so but at the same time I will like bound to build values in my temper laser in my controllers of rolaids and and you figure out a way to do that not In the apps the
databinding functionality is provided by Member objects or more accurately the ambit of observable makes in that Member got object users if you put them side by side you realize that I although the local storage and Amber observables has 3 different API functionalities wise they're actually pretty much equivalent in the sense that the of implementing this thing called the value of serving musically and say I'm interested in this key 1 changes let me know and no that's pretty much what local storage is as well so if you write an adaptor for local storage that exposes these interfaces than the rest of stack completes the observers and everything else can just treated like a regular member object combined to accordingly so that's what it
and I don't really have much time to go into details here but yeah please look at the code I get help and you can find me at the conferences if any questions and the and right so with these examples but I hope I have show you power of the depth that and I think this is pretty important pattern for us every developers to learn them because when using an invoking framework light amber or rails and a lot of people tell you 0 that's a bad idea you should be using them small composable libraries instead of big framework because what if you're constrains there's line a perfectly with the frameworks choices really you of light in that case I and think that's necessarily the case I think is the framework is doing its job right a lot of time if you can be a bit of a creative evolve the problems that use trying to solve them sometimes this solutions that use 1 adapter way and in fact if you are using a lot of small composable libraries you just spreading all those abductors yourself whereas in O P needed framework just have all of those adapters written for you by the default and if you don't like it you can just replace that doctor and let you replace the free doctors that you can use and use the you know 45 or 50 adapters that comes framework is that writing all 50 yourself so I think once you down the path of Enlightenment the possibility here is really analysts while working on these slides and I have come with a servo ideas that I will like to share with you the I assume you I know the latest version of members supports 2 templates implementation called hand wars and HTML box and then I I thought about this a little bit and I remember this slide that saw somewhere
else on 1 hand have HTML and you have like there's and span in images like things like that on the other hand if you're writing an iPhone application you have corresponding things got new idea takes you and your image use and so I saw of a like I was so maybe I can write an adaptor for that so I'm very excited to be reviewing this seeker project you know
it is called the cuckoo bonds and then for the for the ambit of attendees unit get exclusive access is projected not only will you get exclusive access you're going to get exclusive commit access to this projects and because I
believe in doing everything in the open with community involvement there actually exactly 0 committed in this project at the moment so please get to work but I I anyway that's why I have prepared through day I hope to learn something new and have some new ideas a take home you apologize for the excessive trolling and the kids to remedy for that I will like to end this on a positive note so if you fell asleep and you I don't remember anything else from this talk please remember 1 thing if Chen control and so can you thank you very much so few of them in the and and and in blue
Spyware
Hacker
Code
Internetworking
Leistung <Physik>
App <Programm>
Digitales Zertifikat
Prozess <Physik>
Wellenpaket
Spyware
Elektronischer Fingerabdruck
Sprachsynthese
Hacker
Hilfesystem
Spyware
Konditionszahl
Endogene Variable
Hacker
Subtraktion
Programmiergerät
Spyware
Verknüpfungsglied
Mereologie
Medianwert
Hacker
Subtraktion
Bit
Programmiergerät
Punkt
Wald <Graphentheorie>
Spyware
Physikalisches System
Aliasing
Farbverwaltungssystem
Quick-Sort
Freiheitsgrad
Arithmetischer Ausdruck
Minimalgrad
Rechter Winkel
Programmbibliothek
Boolesche Algebra
Optimierung
Speicher <Informatik>
Hacker
Gerade
Rückkopplung
Web Site
Spyware
Hacker
Gerade
Internetworking
Rechenschieber
Spyware
Vorzeichen <Mathematik>
Anpassung <Mathematik>
Mustersprache
Twitter <Softwareplattform>
Entwurfsmuster
Hacker
Mustersprache
Lineares Funktional
Generator <Informatik>
Spyware
Rechter Winkel
Minimum
Anpassung <Mathematik>
Socket
Hacker
Zentrische Streckung
Lineares Funktional
Bit
Spyware
Schreiben <Datenverarbeitung>
Systemaufruf
Physikalisches System
Transformation <Mathematik>
Computer
Term
Code
Socket-Schnittstelle
Rechenschieber
Freiheitsgrad
Druckertreiber
Funktion <Mathematik>
Hochvakuum
Kontrollstruktur
Optimierung
Hacker
Einflussgröße
Objekt <Kategorie>
App <Programm>
Funktion <Mathematik>
Spyware
Reelle Zahl
Mustersprache
Äußere Algebra eines Moduls
Projektive Ebene
Hacker
Prototyping
Schnittstelle
Lineares Funktional
Web Site
Elektronische Publikation
Spyware
Kontrollstruktur
Browser
Computer
Binder <Informatik>
Marketinginformationssystem
Term
Codierung
Mooresches Gesetz
Versionsverwaltung
Hacker
Spyware
Schmelze
Schreib-Lese-Kopf
Sampler <Musikinstrument>
Vererbungshierarchie
Gebäude <Mathematik>
Flächentheorie
Gewichtete Summe
Spieltheorie
Mathematisierung
Page, Larry
Unabhängige Menge
Homepage
Benutzerbeteiligung
Last
Eins
Bruchrechnung
Siebmethode
Hacker
Demo <Programm>
Filter <Stochastik>
Spyware
Binder <Informatik>
Homepage
Informationsmodellierung
Einheit <Mathematik>
Trennschärfe <Statistik>
Analogieschluss
Eins
Maßerweiterung
Versionsverwaltung
Hacker
Cursor
Eindringerkennung
Videospiel
Spyware
Maßerweiterung
Hacker
Hacker
Spyware
Rechter Winkel
Hypermedia
Dienst <Informatik>
Computer
Extrempunkt
Hacker
Task
Rechenschieber
Videospiel
Web Site
Spyware
Default
Hacker
Touchscreen
Lineares Funktional
Dienst <Informatik>
Bit
Datenfeld
Benutzeroberfläche
Spyware
Rechter Winkel
Mustersprache
Server
Zusammenhängender Graph
Projektive Ebene
Ordnung <Mathematik>
Hacker
Homepage
Explosion <Stochastik>
Web Site
Spyware
Selbstrepräsentation
Program Slicing
Dienst <Informatik>
Element <Mathematik>
Homepage
Informationsmodellierung
Interaktives Fernsehen
Emulator
Integraloperator
Hacker
Maßerweiterung
Speicher <Informatik>
Bildgebendes Verfahren
Hacker
Soundverarbeitung
Nichtlinearer Operator
Softwareentwickler
Stichprobennahme
Betafunktion
Stellenring
Systemaufruf
Arbeitsplatzcomputer
Objekt <Kategorie>
Dienst <Informatik>
Datenfeld
Funktion <Mathematik>
Mereologie
Server
Umwandlungsenthalpie
Shape <Informatik>
Spyware
Quader
Kategorie <Mathematik>
Klasse <Mathematik>
Systemaufruf
Mailing-Liste
Quellcode
Quick-Sort
Wurm <Informatik>
Perspektive
Rechter Winkel
Anpassung <Mathematik>
Server
Serielle Schnittstelle
Hacker
Explosion <Stochastik>
Web Site
Spyware
Virtuelle Maschine
Kartesische Koordinaten
Unrundheit
Binder <Informatik>
Framework <Informatik>
Homepage
Netzwerktopologie
Message-Passing
Twitter <Softwareplattform>
Reelle Zahl
Rechter Winkel
Minimum
Router
Maßerweiterung
Hacker
Default
Schlüsselverwaltung
Hacker
Spyware
Adressraum
Kartesische Koordinaten
Äquivalenzklasse
Homepage
Rechter Winkel
Hacker
Figurierte Zahl
Ideal <Mathematik>
Innerer Punkt
Hacker
URL
Aggregatzustand
Router
Bit
Mathematische Logik
Hash-Algorithmus
Spyware
Quader
Browser
Klasse <Mathematik>
Sommerzeit
Datentyp
Hash-Algorithmus
Mustersprache
Hacker
Attributierte Grammatik
Leistung <Physik>
Schnittstelle
Softwaretest
Kraftfahrzeugmechatroniker
Abstraktionsebene
Systemaufruf
Nummerung
Binder <Informatik>
Bitrate
Quick-Sort
Mapping <Computergraphik>
Randwert
Funktion <Mathematik>
Menge
Hyperlink
Dateiformat
URL
App <Programm>
Lineares Funktional
Subtraktion
Prozess <Physik>
Spyware
Mathematisierung
Stellenring
Speicher <Informatik>
Äquivalenzklasse
Menge
Quick-Sort
Objekt <Kategorie>
Regulärer Graph
Gamecontroller
Luenberger-Beobachter
Speicher <Informatik>
Hacker
Schnittstelle
Bit
Schlüsselverwaltung
Spyware
Quader
Template
Versionsverwaltung
Speicher <Informatik>
Implementierung
Kartesische Koordinaten
Lineares Funktional
Code
Framework <Informatik>
Rechenschieber
Prozess <Informatik>
Anpassung <Mathematik>
Mustersprache
Programmbibliothek
Projektive Ebene
Softwareentwickler
Hacker
Bildgebendes Verfahren
Gerade
Auswahlaxiom
Leistung <Physik>
Einheit <Mathematik>
Spyware
Momentenproblem
Gamecontroller
Disjunktion <Logik>
Projektive Ebene
Hacker

Metadaten

Formale Metadaten

Titel Hijacking Hackers News with Ember.JS
Serientitel Ember Conf 2015
Autor Chan, Godfrey
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/34735
Herausgeber Confreaks, LLC
Erscheinungsjahr 2015
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract In this session, we will look at several unconventional things you can do with Ember.js and Ember Data. We will be breathing new life into the Hacker News website via a chrome extension. We will be injecting code into the live website, parsing HTML pages into JSON feeds that Ember Data understands, all while maintaining the existing URL mapping scheme so that our users can continue to share and tweet URLs with the rest of the Interwebs.

Ähnliche Filme

Loading...
Feedback