Understanding JavaScript Libraries via React and the React Ecosystem


Formal Metadata

Understanding JavaScript Libraries via React and the React Ecosystem
Title of Series
Part Number
Number of Parts
Pinkham, Andrew
Confreaks, LLC
CC Attribution - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
DjangoCon US
Release Date

Content Metadata

Subject Area
After an initial foray into JavaScript in 2011, I actively avoided learning or using JavaScript. Then, in early 2017, JamBon Software took on a project to build a bleeding-edge JavaScript web app in Facebook’s React. Suddenly, I did not have a choice and had to learn JavaScript—versions 5 and 6—as well as Facebook’s React library with the entire JavaScript and React ecosystems behind it. This talk will give developers a framework to analyze the overwhelming number of tools in the JavaScript world by categorizing the types of problems currently being solved. By the end, you’ll walk away with a mental framework of the solutions being built today. We will start by looking at a history of JavaScript. This will allow us to discuss problems that developers need to solve in browsers when interacting with APIs. With a full understanding of the problems, we’ll turn our attention to discussing the types of solutions available and quickly discuss how different libraries like Angular, Vue, Inferno, and Cycle implement these solutions. The talk will then explain how to use React in tandem with Redux to build a tiny website. We will demonstrate how to use tools like Webpack, fetch, Promises, and thunks to enhance React to solve the problems previously discussed. Finally, we’ll end with a review of the material, and consider some of the topics being looked at by Facebook, Google and Microsoft. Outline: Libraries as Systems to Concretize Abstract Thought Understanding the Problem Node, NPM, and Yarn DOM-Focused JavaScript Libraries Understanding React Enhancing React Converting ES6 with Babel or Bublé Aside: Handling types with Immutable.js, Typescript, and Tern Handling Modules with Webpack or Rollup Polyfills for Behavior Replacing XMLHttpRequest with fetch Using Promises and thunks for asynchronous actions React-Router for Single-Page Apps Redux-Forms for User Input Linting with ESLint Testing in 2 minutes React with Django Conclusion Review of Problems Review of Solution Types Break Down: Modules vs Syntax Transformations Performance with InfernoJS Future JS.
Computer animation Binary code
Satellite Point cloud Client (computing) Mereology Public key certificate Information technology consulting Formal language Image resolution Web 2.0 Computer programming Software Videoconferencing Authorization Scripting language Hydraulic jump Series (mathematics) Computer font Cycle (graph theory) Gender Forcing (mathematics) Bit Word Process (computing) Computer animation Software Software framework Website Cycle (graph theory) Quicksort
Mapping Java applet Multiplication sign Moment (mathematics) Projective plane Electronic mailing list Client (computing) Mereology Goodness of fit Computer animation Divergence Software framework Right angle Scripting language Quicksort Figurate number Website
Computer Scientific modelling Code Cartesian coordinate system Computer Cross-site scripting Computer animation Software Software Software framework Website Software framework Right angle Data conversion Communications protocol
State of matter Java applet Graph (mathematics) Multiplication sign View (database) Scientific modelling Analogy Mereology Food energy Formal language Data model Sign (mathematics) Analogy Core dump Videoconferencing Software framework Internet Explorer Vertex (graph theory) DOM <Programmierumgebung> Social class Covering space Programming language Collaborationism View (database) Numbering scheme Software developer Bit Mereology Formal language Photographic mosaic Process (computing) Content (media) Duality (mathematics) Order (biology) Right angle Quicksort Prototype Arithmetic progression Data structure Point (geometry) Reading (process) Sine Numbering scheme Implementation Inheritance (object-oriented programming) Web browser Event horizon Revision control Photographic mosaic Cross-site scripting Prototype Object-oriented programming Internetworking Computer programming Authorization Scripting language Data structure Subtraction World Wide Web Consortium Addition Inheritance (object-oriented programming) Cellular automaton Element (mathematics) Java applet Content (media) Cartesian coordinate system Web browser Word Event horizon Computer animation Computer programming Electronic visual display Netscape Abstraction Series (mathematics)
Axiom of choice Code Java applet Multiplication sign Scientific modelling Home page Compiler Software bug Web 2.0 Medical imaging Facebook Stress (mechanics) Fiber bundle Single-precision floating-point format Software framework Volumenvisualisierung Hill differential equation Graphics tablet Product (category theory) Spacetime Namespace Process (computing) Duality (mathematics) Module (mathematics) Configuration space Right angle Moving average Quicksort Data type Directed graph Game controller Mobile app Computer file Determinism Translation (relic) Web browser Data management Goodness of fit Term (mathematics) Computer programming Scripting language Subtraction Addition Scripting language Element (mathematics) Stack (abstract data type) System call Web browser Compiler Inversion (music) Computer animation Integrated development environment Library (computing)
Keyboard shortcut Group action State of matter Scientific modelling View (database) Multiplication sign Direction (geometry) Parameter (computer programming) Mereology Facebook Virtual reality Mathematics Single-precision floating-point format Aerodynamics Information Library (computing) Flux View (database) Structural load Functional (mathematics) Annulus (mathematics) Process (computing) Content (media) Duality (mathematics) Software framework Self-organization output Right angle Quicksort Data structure Flux Web page Game controller Rule of inference Architecture Goodness of fit Term (mathematics) Computer programming Data structure output Subtraction Computer architecture Game controller Dialect Key (cryptography) Information Content (media) Group action Performance appraisal Computer animation Function (mathematics) Spectrum (functional analysis)
Group action Game controller Programming paradigm Information State of matter View (database) Multiplication sign Mereology Functional (mathematics) Computer animation Software Data storage device Internet service provider Artistic rendering Reduction of order Software framework Pattern language Quicksort Flux Computer architecture
Axiom of choice State observer Complex (psychology) Keyboard shortcut Building State of matter Java applet Multiplication sign Interface (computing) Mereology Variable (mathematics) Web 2.0 Facebook Bit rate Fiber bundle Core dump Software framework Fiber (mathematics) Social class Product (category theory) Process (computing) Mapping Moment (mathematics) Virtualization Bit Variable (mathematics) Band matrix Arithmetic mean Process (computing) Software framework Software testing Right angle Pattern language Quicksort Data structure Fiber Game controller Server (computing) Mobile app Software developer Connectivity (graph theory) Web browser Template (C++) 2 (number) Revision control Device driver Goodness of fit Natural number Term (mathematics) Software testing Scripting language Subtraction Form (programming) Installation art Information Scripting language Computer Gender Projective plane Java applet Interactive television Cartesian coordinate system Web browser Template (C++) Computer animation Software Vertex (graph theory) Electronic visual display Film editing Form (programming) Library (computing)
Coma Berenices
over and
over and the
same so my welcome to the last talk of Genghis Khan Yunis 2017 you made it is survived almost and thank you for coming to listen to me talk of the topic for today is understanding JavaScript's binary act and react ecosystem so my name is
entered income I am probably best known as the author of jingle unleashed I am currently working on a video series based on the same material with part Pierson and hopefully a 2nd edition for agenda 111 of the book is in general and 8 but by day I'm suffer consultant with German on software i currently working with a client on Machine Learning over high resolution satellite imagery which is super interesting from a little bit outside what I'm used to doing but it's nice to get away from gender and so while nice things about being self directed a consultant you get to work on some really really cool projects as of the beginning the year started working with Russell keep McGee on search cycle surgical is basically a way for automatically installing and monitoring certificates in the cloud specifically Amazon and Asher really looking for beta testers and before the end of the year so if that sounds even remotely interesting please come talk to me but today you're here to
talk usually hear me talk a lot about JavaScript and I have to mention you're you're doing the react talk right 0 no it's not react talk it's that the jobs that that was a little bit bait-and-switch that I'm really sorry if you showed up here expecting your mostly about react this is mostly going to be about what I learned about JavaScript wall programming react site this is targeted at dads who were not particularly familiar with job script so as you use and M and John I'm really not hold it against you if you get up and you read the words the the talk will outline is going to start with how they get here right like I mostly Python Django alone and suddenly in doing jobs like what forces me into using this language that I had desperately desperately tried to avoid the jump into sort of Greece a brief history of the web men were talk about jobs created the web frameworks what the problem is and then finally react and sort of reacts ecosystem in all the things that we had to do with their this talk is
fundamentally incomplete on and I really wanna take a moment to focus on this because I'm taking a year and experience and I'm condensing into 20 minutes I simply don't have time to go into all the details of what I'm hoping for here is to give you all the people who were sort of beginning on the jury and don't have a Mac somebody give you a very good map right it's sort of a medieval map and you know here we dragons and there's an island kind of all over this way but hopefully it's better than starting with nothing at all on the so let's talk about how I got
here what was started the journey well in early 2016 a client asked me if I knew django have said yeah I have I have inkling of how this thing works out and they said well that's great we'd to divergent Javascript on top of the GenGO artemisinin and that that's not how that works Mr. going there no please do it and I believe your education to guess how the rest of that project where the 2 of them starting this project this is the to do list I set out for myself you know all learn Java Script figure out how it works and then go build its yeah I forgot the most important parts of the most important part is I didn't understand the
problem but it did understand fundamentally what the poundage I was trying to solve with the framework and with JavaScript and this is not a commentary about JavaScript itself right this
happened Django people go 0 yes and above the website which are the use of the future what just happening right what actually happened is is a fairly implicit conversation right someone is actually ask the question hey I need to build a software application that communicate with other computers over HTTP and is going to serve of HTML and CSS you know you know many tools that do have 0 yeah Django handles all that you should stand up and so I was asking this question we can have model the dynamic front and that is going to communicate with an API 0 0 0 you should use all of these tools will wait hold on what I might actually asking when I ask that question what is
fundamentally the problem that I am trying to solve that like many things the problem becomes really really clear if you so history so as I'm
ready to now it's not 1st appears in 1991 and it is immediately rolled out into the 1st browser called Mosaic and then quickly implemented in things like Netscape Navigator and Internet Explorer but lovely it's all slightly different implementations just like really necessary html is originally intended as a way of sharing scientific documents right you wanna go ahead and share your scientific research at CERN so you've got the content but you also have all the structure of the document and this is the title of the authors of this is the abstract cetera cetera cetera but that introduces a sort of duality here right there's content and structure when you're dealing with html and I stretch this analogy I if it's a little bit like Model-View-Controller then the content is a little bit like the model and the structure of the document is a little bit like the view I realize instructions under the I'm not starting to Monticello right because CSS doesn't actually get talked about like and for the 1st like this and this until you you know the very end of 1996 into the 1st time that you really get see and CSS use is 1997 which is 6 years after each mole really comes to be so I think she Melissa of script jobless treatment is built in 10 days it's a good language in 1995 and it effectively this sort of collaboration between Sun and Netscape is a freaking out about Internet Explorer on and so they hired this guy Brendan Eich and he wants to put scheme in the browser the problem is that is the politics they want to use java right then they were referenced Sun's Java so the college of a script they need something that looks like object-oriented programming so he goes and he uses prototype will a progress inheritance taken from a programming language called self which looks nothing like job on it's important the the reason they're building this is because they want to manipulate the dark right that the real reason that the putting together if they want to be able to change the content and structure in HTML it's also worth noting that this has changed over time right the jobs for that we are currently working with is not just that that was put together at all and now we have the history additional and of script we really understand the core problems here right has vocabulary that we think means 1 thing it actually means something completely different classes don't mean what you think it means only no jobs scripts and additional are implemented slightly differently in all of the browsers and John script has slightly different features in each 1 of these browsers according to its version of the channel Don is we're right wing it's it's got its own hidden state you know it's supposed to be the state and it's got event handling but it's different across all the different browsers and then there's the duality of it right content and structure so let's go through each 1 of these problems in this order right was on job script you're not going to be able to do much about the fact that they use words and you think it means 1 thing and then it means something else the sad truth is that you simply have to sit down and learn the vocabulary am I found Douglas Crockford book by jobs for the the good parts to be incredibly helpful and Eric Elliott's programming jobs of applications with less about Javascript and more about this stuff that we're about to talk about but I want to put it on in 1 side and then Carson sins and you don't know jobs script is really interesting not necessarily immediately helpful for the hands on stuff if you're not into books like I and you might wanna look at masters in and adult ILD they have videos that sort of cover the same stuff what so that's JavaScript's the language nonnegative about the different versions of the skip the fact that it's slightly different arouses to this no longer something was developers have to worry about right J. careening tools original cell this in the early 2000 energy using a modern framework and you don't have to worry about it so it's but just skip it you do have to worry about the different language versions and this is where things begin bit we're right because if using Python you can just decided to run the Python 2 . 7 A C pipe on 3 points X right is right but you have different browsers and are implementing it seems spec so the specter is Agnes script and you can propose things by the single see 39 I'm actually unclear on what the Members of it if you're running in the browser you expect a sort of when we started yes 3 so as JavaScript that it conforms to Agnes script 3 or jobs for backing conforms to atmosphere 5 and understand circling the MetroScriptor US 3 years 5 elements in modern browsers but script 6 and most of Saturn currently exists but unlike with Python we use the like l we upgrade our codebase now you just have to running Python 3 and you're done with it
you don't have to control who is running your job script you don't get to say who is it what browser is being used so the question then becomes will hate can be right in modern java script and ship all the job script breaking reckoned yes 6 and yes or no answer is yes you can compile Johnston John of the community has decided that this is called translation no I don't know why I know I'm not asking yeah however there is 1 additional complications on on top of transpiration and is that yes 6 introduces namespaces in modules as Python people if you look at this go way over an important thing for you you import all the time import x from y or simply import why right this is easy but JavaScript has no knowledge of this in atmosphere 5 you don't get to use that all but you do get using mistress 6 so how do you take all of your different files in namespaces and produce a single file what's called right you bundle of these models all these namespaces into a single file which you can then serve up to the browser and run as if it's the old so let's not talk about transpire lawyers and bundlers and sort of intuitive Transwell is actually fairly simple right it's a compiler and and you just want of the if you're starting just use that this really interesting project and curious about all of this so called learning it's sort of like a performing babble it isn't all the things about world does but it has like an edge checking up his work knowing that you don't have to go from job scripts to drop script you can also go from typescript jobs for work undercover scripted jobs script other types of such a really interesting because it's Microsoft's product and the introduced static typing into job stress and we're currently using it work I only used it for 2 weeks so I don't wanna say too much about it but so far I'm but but learners what I found most confusing can or just like 0 use web what is what that what is what is the problem is is that originally you had to tools you would you would take all your files you run this pipeline you do whatever you need to it and then you pass into browser fight and it produces that 1 single file that you need a great it's 9 using went through 4 tools in all things that you want until went back but that means that well pad is not only a bond where it's also your pipeline tool and then to make matters more confusing it expects not only to pipeline your script it once you're images in your CSS in your HTML and any asset that your answer and so the configs really really really confusing of I wanna know very quickly that and went back packets for apps if you were be providing libraries you wanna check have a thing called roll because you know do 1 thing and do 1 thing well yes and no now team of libraries we haven't really dealt with any the environment tools we managed to find that are in the back is looking a little over well that sorry it's on the the environment tools right you to pick you just use pay what happened on you get a choice so and can was king of the hill but when you install things then can it's actually on deterministic so I had people 118 were seen 1 but some also see different but I wasn't seeing any bugs so we switched to yard which installs things deterministically now I'm hold that has actually fix this I don't actually know I tried it we stayed with yachts ulcerative this thing PNP and it's was more space efficient honestly I don't really know what to tell 1 is run by use your on it's great I am you know I feel like people could buy about this understand you got their Lintas element that should say Jesselyn's NGS hint on their the originals and they're the basically being succeeded by the sink obviously and you should probably just use it on In conclusion for the starting tackle for just JavaScript we touched of a problem here right you want babble for translation Web pack for your pipelining and bundling you want to use wins for landing and then for goodness sakes I don't want to tell you how many many more yards on your knees back my Facebook that makes it your choices here in terms of institutional support so before we talk about the various frameworks libraries I wanna make sure everyone's really clear about what I mean and making a really important distinction a library something you call yourself right you requests as a library you have something moving you call it a framework is something that is gonna call it your own code referred to as inversion of control or else sometimes the Hollywood principles don't call us we'll call you and Django is a really good example of a framework on both provide a mental model for working with the tools to provide a solution right so we understand the problem right the problem is effectively the Don I think Margaret Rogers said
it best right this is a reminder that the dark is actually a giant mutable global variable in the middle of your program not to mention the fact that if there is this duality to it as well right so the way I kind of think about it is like
that's for evaluation of of 1 side of the model and you and you really rooted in many kind of jobs could be over there and you're going to try and use it in some way to control so we all are so familiar with model view controller an angular 1 is a really good example of this I haven't thing with angular to warning were for I just found out today thank you that there is no angular 3 madness alone but 11 it's referred to as the BCI much of that 100 per cent accurate and they keep the jobs could totally separate and they ask you to annotate the HTML with what they call directives so that it kind of connects the 2 with this two-way binding so the content is dynamic but the structure of the apostille dictated by huge Kamel I think of it like this
right you managed to split up this model into smaller parts and if you change in the HTML it's reflected in JavaScript and versa but it doesn't actually serves seperate that we're duality between each female or in regional yeah all right the other side of the other end of the spectrum we have these reactive programming thinks that they're fairly new they're a little strange and they look at a promising like we want to think about this in terms of time right where you have these initial parameters and we expect that would ensure that include buttons organ that inputs but changes happen according to time and we want this changes to be deterministic so you set up a function at the beginning when your page loads and you say well if things change in the following ways if I see the following things that I want you to deterministically change region on the following ways it's a little strange and the real problem is is that it's almost kind of gets away from this idea of model or state right you have these actions over time and you coming in through of function so it's very functional and then you have review now this is very nice so you'll notice that a single direction for control and that's a real improvement over to binding Facebook's react is sort of this lovely in between right of it stays with the single direction of information but it's a library and so it only provides a part of the solution I think they call it the view in a B C at and again the NBC is not quite right but we're gonna stick with it and they expect your BCI is going to follow this thing called the flux architecture on top of that they're like 0 to view and you have to do you have the following rules good luck learning all of them the 1 key difference tho is that they move completely away from modifying the HTML they introduced this concept of the Virtual dance and they're going to modify HTML after the create this virtual Don and that really changes things quite drastically it looks almost kind of like this the problem of course is that react only gives you that it is the part of the controller and none of the state was so the way they put this together is they say 0
well this is how it works the actions are either network actions and user actions it's clicking a button to receiving network information lectures on from the and they're going to handle you know the rendering of view but they don't give you this dispatcher which is effectively the controller will controls the actions and how to behave I and the dispatches goal is always to change this state for the store it's just raw data that is used to render our feature now so what you do on there's also a side trip here there are only actually giving you kind of sort of part of the view so the 1st thing this is 0 yes we you have
to be able to handle datasets that's how we're going to sort of Provides syntactic sugar that makes sense for interacting with the virtual down so that's the 1st thing you need and then there are lots of tools that provide the flux architecture the 1 we're using was read out to turn become that the defective go go to and so it works out of functional accumulator sometimes also called a reducer you hear about reduce a pattern unfortunate have time to go into it but once you sort of looking at functional part of functional paradigm it actually fairly intuitive and so breaks down
like this right you got the the redox and the connector react redox on which allows you to manage your state part of the controller and then react NGS acts for handling the the 2nd the sort of the end of the controller and writing out to you know cost that turns out not to be enough either everything I've just shown you is
synchronous and that's a real problem because you're interacting with an API in you're receiving network request so you need to be able to handle asynchronicity in your application there are lots of solutions for this relapse absent is the simplest of methods is using a thing called Retix observables is overkill on reacts seems to be growing in terms of preference I haven't played with it it's a lot of the other thing is that you are going to making network requests and for a long time that you wanted use x MIT the request and don't for moving to a new specter yeah polical for fetch it introduces a tie 106 of we'll see is redox forms in redox logger it is exactly what you think unattended could moments talk about testing because testing is the best you have yet another choice to make where the interest rate jobs from for a long time only ran in the browser suddenly we have this node thank you cannot run it directly the process that's where web is running and you can also run your testing and in fact you probably should originally you would use common with Jasmine remote go to run directly in the browser and or you would have done in 10 testing Witzel anyone drive but because you're not really programming to the differences in the browser using a framework you can avoid all that complexity and you can use known to run your tests with Facebook suggest and it's built to work with react into glorious we went from having tests that ran out you know 6 or 7 minutes in Karma are they ran in under a minute with chest it was changed I highly recommend it on so that's react the mental framework there is a really important implication here react owns the entirety of the dominant up is a virtual Don and it's in full control the dance so how does that interact with genuine gender templates and unfortunately there is no good answer here i if you're just interacting with the Django EPI irony any API is is fairly straightforward right you said you knew make requests and you get on jobs for back and you on yes you are interacting with gentle templates Allen Oh boy right is gender templates wanna provide it Chanel and Don but react 20 in full control it on June precompute with like node on on your server you try and provide information in a template so that you can load that information directly into react what about progressive enhancement what about accessibility honestly there isn't a clear cut answer here it depends a lot on map a lot on the market who uses on this is like I could a full talk about its luckily I don't have to because Julian core contributor of gender and gave a talk about this to Jenkins ago is still quite relevant so I had recommended To conclude JavaScript's problem it is the doctor right the Don is not as tho it's horrible right it has this dual nature to it and it is a giant global variables and the goal of every framework is to try and provide some means of dealing with this this global variable in the same fashion whereas with with own it you need it should be on the back and a lot frameworks look similar right you can start with Jane going you can look about applying you can look at class and you understand what's going on because the solutions are fairly similar right you understand the core components is a little harder job script because of the way they been rationalize the solution is a little bit different so it's worth taking time to look at their mentality near the mental framework that they're using because this solution for your product is going to differ there some places where angular is going to be a better choice then react and fortunately it's gonna really depend on the product that you're building if I were starting this all over again I would not spend the 2 weeks I did considering whether pack it's awful thankfully no really on thankfully of this work is but together this thing called create react act it is great but it works like black magic which is unfortunate but it gives you this project that is your incompatible it comes with web packet comes with babble gives you can figure it works with yes land and it comes with just tests goodness gracious thank you and of course you know J Sexton react somewhat obvious you will have to install redox and redox logger and reacts reacts and Rio might you know you get the picture yourself but but you know you're 1 have to do that it on and only 15 seconds what's coming next I who as with Java script it's a of script and everything moves in a million miles an hour and react and is about to ship a brand new version is the fastest it's better it's called react fiber should I use it I really don't know on the Apache Foundation important said you can't use reacting open-source apps because of the patterns that Facebook has placed it on the reactor co there's a really interesting problem where should you use it in all what about using our libraries like Inferno GS which is effectively the same API in exactly the same mental framework but that is much much quicker do those patterns applied I honestly don't know and there's another really interesting this an interesting moving the Google I O lately has really focused on performance because of the strike running Java Script on these mobile devices is actually really taxing bandwidth computation et cetera and so there's a real sort of moving jobs for community to move towards simpler smaller apps salt is really interesting it's not ready for production yeah but I would keep an eye out for it of I heard really good things about you dance I should use it instead of react and I'm unfortunately really ensuring I wish I could be so you have performances that from her an answer about but for now the thank you very much there their so have the
2 of you


  609 ms - page object


AV-Portal 3.11.0 (be3ed8ed057d0e90118571ff94e9ca84ad5a2265)