The Evolution of JavaScript Frameworks and Technologies

We just had a utility framework and went through the MVC era then now we're at the view right I personally feel the next thing that's going to go is going to be data not go but I mean what's going to be reinvented is data uh I'm hoping or predicting I don't know uh that we will move away from APIs and start moving towards WebSockets things because right now the world is all about real-time right like I want to get a notification, I want it now okay APIs don't really give me that unless I do you know constant polling of my API so I feel WebSockets are going to be the way right instead of updating user information through an API we're actually going to send it off through a WebSocket and update it right then it's going to update all your phones uh so that's one thing that I'm assuming we're going to go as far as like who's going to come out winning from the component clash of the components. Honestly, I think it's going to be React not because I'm going to React meet up but because coming from the iOS space I know how much work goes into just creating an iOS app in terms of like there's a reason why PhoneGap or Cordova don't work it's because and why React has become so successful with React Native is because React Native actually communicates down to the JavaScript core library and it's a library inside of iOS that allows Objective-C or Swift code to execute JavaScript and vice versa right so that's how React Native in a nutshell works. So, Boo and Polymer they've got a long way to go if they're if they have even if they even think they're going to be competing with uh React Native in the future right.

As everything is moving in mobile that for as a developer I imagine in five years now a single JavaScript developer will be able to create applications for you know of course the web mobile using React Native, actual platforms using your React Native or something like Electron. So that's where I feel that that's going um and so I mentioned like history repeats itself right so with that you see yeah I'll just leave it at that.

Some Influential People in the JavaScript Community

The people that I really find influencers people that I like watching talks over when I go on YouTube and as like to recommend it if I see Tom Aquino's name I'm stopping what I'm doing and I'm watching this video, really good presenter he's the manager of the React team right Pete Hunt is also part of the Reacting has some really good presentations uh especially during the 2013 2015 uh those presentations were really good because that's whenever you know the world the JavaScript world was really changing to how we know today. Brandon is actually the creator of JavaScript, Robert Uncle Bob Martin this guy is amazing he's funny too, uh he if you want to know about architecture you're going to learn about things like MVC, MVP talk about things called Vipers and iOS, anything like architecture will start like getting you know want to become not only a better developer but really understanding and be able to talk the jargon Robert Uncle Bob Martin is your guy John Reed he actually comes from an iOS background but most of his presentations go over concepts like you know architecture test-driven development he is very good. They also talk they all talk about nbc, not the negative, not the negative like that, I did but they explained since they were alive during its creation they explained what its actual intent was, lastly like Douglas Crawford he is actually just started watching Durian while creating this presentation he actually kind of goes hand in hand with Brandon he a lot of his talks are on the early days of JavaScript this is where I learned a lot of the you know the browser wars and you know what equal script how that all kind of transpired.

Topics to Watch for

The Topic is Unidirectional Data Flow Architectures in JavaScript and Some Must-Watch Videos for All JavaScript, especially React Developers are The Shooting, White. This is like of the ugly yellow that's really hard to see but it's going to be the JSCon 2013 and that's when React was being announced and also The Hacker's Way of Rethinking Web Development at Facebook this was uh eye-opening I remember whenever I was applying this you know these type of architecture like Redux and Flux to iOS, I didn't really understand it I just knew it was what I needed for my team, uh so these videos really did help me understand what was going on what's up how we got to where we are today.

"WEBVTTKind: captionsLanguage: enso hello y'all this is a good way to start off a presentation um today i'm going to be talking to you about the history of front-end frameworks uh this is actually i feel that it's a pretty important talk not because i'm presenting it only because the material that uh i'll be going over today really does help uh it helps explain shape explain why things are the way they are now with javascript you know like i'm assuming there are some developers out there that go on stack overflowing and uh you know as they're looking for the answer they see jquery and they're like what's jquery how does that fall into react or you know they talk about state like what is state like how old i'm hoping tonight we'll be able to uh i'll be able to explain that and help answer some of those questions you may have uh so first of all i wanted to uh thank the houston react meetup group for allowing me to present tonight uh i also want to thank y'all for coming out the last thing that i want is for someone in this room to walk away thinking that you know man that was a waste of time so i really i tried to or i made this presentation uh with the mindset that though there are you know many types of developers in this room from you know uh developers that are self-learning developers that are currently in boot camps to you know developers that have been doing this for decades now so i really feel that people or everyone here will walk away with something another i guess another housekeeping i guess i want to tell y'all tonight we are recording tonight's presentation so in case that you missed something or if you want to follow up on some of the topics i'm going to be talking about know that i will be posting it on the meetup group either later on this weekend or maybe even tonight i don't know yet uh make sure i'll go over everything and then also since another thing i want to mention we can hold all questions to the end just so that we can kind of have like a q a group discussion on some of the questions y'all may have so with that let's get started oh i think i need to click on the presentation there we go so as i mentioned my name is fabian pontello uh plot twist i'm actually an ios developer at taiwan yeah hold y'all um so uh at chai once here in houston we're a digital innovation agency uh we work with most most of our clients are in the enterprise space and what's really cool is because i work on those type of projects i come across some really interesting problems that a lot of people a lot of you know average adult developers won't come across um so things like you know some of the topics i'll be talking today things like architecture uh things you know those topics are before i didn't know anything about it now i'm very very comfortable uh comfortable with them and then also okay so as far as my gloves javascript swift and accidentally hit the space bar twice but uh this is going to be a ben stiller theme presentation i wanted to have some fun with it and uh so i felt you know earlier this week i came across a ben stiller gift i'm like yes this is what i want to have in a presentation like i could really make a story line with ben stiller not it's not that he's my favorite actor or anything he just has some really funny movies so hopefully you know if you don't walk away with something presentation you at least walk away wanting to see one of his movies right so let me hit i'm gonna get you one more time there you go so some of the questions you might be asking yourself you know what is ajax what does state mean what is this thing people say is nbc what is that i don't know why are there so many frameworks and then also what is ecmascript like how does all this tie in together so if you have some of those questions great i really hope that i answer them and if not i afterwards i can answer them i provide you the tools so you know find those answers so let's go over our agenda first foremost what is javascript and why why does it exist then we're going to talk about before the before time and with that we're going to be talking about web versions ecmascript the browser wars it's a really interesting battle been you know took place in the mid 90s or mid 90s to the early 2000s a lot of casualties then afterwards we're going to talk about the before time and then which we're going to be talking about server side rendering and client-side rendering now one thing i want to mention the material that we're going to be going over in these two sections are in no particular order it's just information that you need to have that just because you know the come before ecmascript doesn't mean that it happened before it's just you know information that you need that would want for the audience to know uh before we get to our next section which is the framework era all right so i really had some fun with uh this section here and i realized like we have we had all these battles or wars in between these frameworks right and if no one gives them a name like i'm going to and i'm going to name him whatever i want to call them right so i'm going to call the first war first blood right this is going to be your jquery's your mood tool dojo then someone can i think or if you can already think of what the next war is going to be the mona oh kind of kind of got cut off there but it's the uh the monolithic melee okay i try to have you know some some fun with them and then last is going to be the clash of the components so these are all wars right now we're currently in the third war i don't know if you know this but the first two happened and if you missed it don't worry i'm going to recap what you missed out on all right and then after that what's next like okay fabian we just had these three wars we're in the middle of the third one i'm tired what's coming down the pipeline this is actually going to be my opinion so as i mentioned a few slides i'm an ios developer so my opinion i don't really have a lot of weight behind it but from my observations what i've seen i feel i kind of have an idea where we're going uh next we're going to have the follow-up topics these are just going to be it's going to be a slide that's going to have everything i talked about briefly along with names some videos there are some must watch videos if you're a javascript developer especially a react developer and then lastly we're going to be going we're going to have questions sound good so first what is javascript and why so it was created in 1995 by brennan i when you say his name he worked at netscape it was developed in 10 days think about what you did 10 days ago we're thinking about what's like what's 10 days from now it's going to be what not this sunday the next or next two saturdays from now imagine you create an entire language so next time someone starts you know batching up javascript say hey i want to know how well of the language you could have made in 10 days right next thing netscape and sun's lab joined forces against microsoft so what why this is important is remember brandon brandon you worked for netscape right and so right now this was happening during the early browser wars uh we had you know you had microsoft you had or internet explorer netscape you got a few other browsers and they're all pretty much fighting for you know what's going to be the main browser little did they know this thing called chrome was going to be coming out later but uh for right now they have no idea right so they're all fighting so netscape and sun's lab given the fact that they're much smaller than microsoft they actually join forces like okay hey um we needed to have we need to have this uh this actually the uh the next slide so why was it made to make the to make a browser you know interactive right and so they joined courses to create javascript or javascript was created here and then they later joined some labs you know kind of joined the cause like okay let's let's plain javascript like this is what we're going with is where we're putting all our easter eggs in let's go with that that's the only way we're gonna be able to compete compete with microsoft and whatever you know monster they come out with right so by the way this this whole what's going on this really should be its own talk this reason why i'm briefly going over it like i could spend probably another two hours talking about it just knows a lot of information don't worry the names for you to look into like uh brandon and then another one don't worry it's gonna be later on in the slides but this is really really interesting what happened here i feel everyone should know this but don't worry for today just know a few of these items right and like this next one right here sun's lab playing ownership of the javascript trademark so why is that important well this is why the standard's called ecmascript and not javascript so i mean you know we have like uh es5 es6 esm there's a reason why it's not js5 or javascript one javascript five dollar script six like we have like ruby one ruby two swift one swift two right um so because sun's lab had claimed ownership of it whenever netscape went to uh standardize the language well they ended up at the european computer manufacturer of european commuter manufacturers association don't worry like i said there's some things to be able to learn at a later time fortunately and they couldn't call it javascript and so they ended up falling on the decision that like you know let's call it ecmascript and so for the longest time me as a javascript developer i'm like what is es5 like i was just been doing javascript also if you were talking about this ethyl script like what is it it's the same exact thing the only reason why it's not it's javascript echoscript js jstrip it's all the same thing trademarks the reason why we can't call it javascript i don't know what it is now like that's still the case but that's the reason why we are where we are now uh so this is a bit of a timeline don't worry you don't have to know what's going on here or but just know you know from 1999 all the way to i believe i think it goes down to 2016. a lot happens here right so we have like the creation of some of these browsers as well as some frameworks you know html5 angular is somewhere there i know i saw it earlier we have rails at jquery here over here in 2006. so just know there's a lot that's going on by the way like right now we're kind of like circling this area here right but just uh keep in mind 2006 that's a that's a pretty important year for a javascript developer so just keep that in the back of your mind so before the before time right like i said this is these are some items that aren't in any particular order these except these are just this is just material that i would like for you to know before you get to the framework era so web 1.0 what that means no dynamic content you know what that means don't worry what 2.0 will explain that i didn't know what it meant uh javascript and css are still you know little babies they don't really have they still don't know who they are what they do really and the major players were netscape and internet explorer and to kind of give you some context i bet you're trying to wonder like what was i doing in 1990 or like what was what was happening what can i kind of like you know attach myself with and remember what it felt like to be in 1990s well around this time ben stiller was filming happy gilmore so in case you you know next time you see this movie just remember oh hey web 1.0 that was at the same time so the next one with 2.0 right so it added dynamic html it means javascript and css can manipulate the dom like cool like that that's react in a nutshell really right so this was in the early 2000s uh drag and drop animation you know some examples are going to be like amazon wikipedia youtube so this is in the 2000s right so you can kind of remember like okay what can i attach myself to remember like oh this is when web 2.0 came out well that's when stark skin hutch came out all right so next time you see that movie you know it really takes place in the 70s right or 60s i think 70s just know that oh web 2.0 was around this thing you know around the same time so this is now okay like i said nothing's in any particular order it's just information that i needed to bring to your attention so ecmascript right so now we have this is really really cool i didn't i did i learned this while doing research for this presentation so v3 1999 right v4 there's a reason why you don't hear es4 right i don't know if you ever look looked into it but it doesn't exist it was abandoned actually right so then you have b5 and 2009. look how there's a 10-year gap here right look at these look at the dates the stronger makes america 2006 right like all these uh things detective here right v5 2009 5.1 2011. this is actually pretty important as well you know when you use the use strict in your javascript that's actually the standard that they fall on uh which i mean it falls on version 5.1 that standard so some of the ugly parts of javascript that they really want to do away with actually gets you know gets declared here in 5.1 uh then you have v6 v7 vn you kind of know from there but there's all this ef stuff right so remember it's ecmascript only because sun's lab had the trademark to be you know had the javascript trademark so whenever they had to create the standard for it they're like okay well let's just call it ecmascript very confusing i'm not gonna lie i didn't learn it until i did this presentation so then now okay that's some information that you know right remember remember those dates i was talking about right now let's enter the browser wars right and so this graph actually ends in 2008 which is when chrome was created i think you can kind of know what happened from there as far as you know who was winning or who started winning from there but let's let's uh not knock the line i couldn't find one that had 1990 you know from the 90s all the way till today so i had to just you know this was more important at the time of course so just know 2008 chrome got created things changed again but uh okay this is the timeline from 1994 to you know 2008 right if you look back this time 99 2009 right things are starting to timelines are starting to uh line up here right so this is what i found very interesting i'm going to read it to you having 10 years in which nothing happened allow for the language to become stable douglas proctor and so what he what he was talking about was this right here i was talking about browse awards right what was happening then was all these browsers you know firefox internet explorer netscape they're still figuring things out especially in the javascript world especially now okay we thought browser compatibility was bad now back then was worse what would have made things 10 times worse is if we had new versions of javascript as these browsers are trying to you know figure things out and try to make things compatible right so it was good it's great that we didn't have a es4 because that would have i don't even know what would have happened might you might have been right in the uh you know front end in java or c or something i don't know but just know that you know these browser boards and the ecmascript you know it all kind of ties in together just i would have hated to work on javascript during this time this is just a headache so it's good so now okay that was some information right like i said you just needed to know that as we're getting into the not this section but the next okay so now we're at the before time so before time i want you to think we're not the frameworks yet we're not a jquery we're just in vanilla javascript right so some terms i want you to know are server-side rendering and client-side rendering so server-side rendering the logic existed i'm going to explain these two so server-side rendering logically existed on the back end it's very expensive what i want you to think of you can rewind the clocks real quick to you know early myspace days or late my space days or early facebook days where you know you're standing there in your profile and you're waiting for you know a new notification and you're like okay command r let me refresh it right and all of a sudden boom you have a new comment or something right but you wouldn't have seen it unless you refreshed it right that's server-side rendering that means all everything that you see on the screen is actually is actually being computed or created on the server and the server that fits that to your browser right then you have client-side rendering client-side the logic exists on the client this is what we are experiencing now this will you know react angular move all that's where you check to see okay is the user logged in the user's logged in let me show them this view because the user not logged in okay i'm going to show them the login screen that used to happen on the server now it happens on the client the reason why i was expensive let's pretend you know you have your little your little website that unfortunately it's just you and your mom that visit right that's not really that expensive but if you think about facebook or somebody's major you know youtube they did server-side rendering imagine having to spit out for millions of requests every single day you know the entire web page it's pretty expensive um so that's the reason why client side exists so like i said this this is going to come into play later this is going to um this is important when we start talking about ajax so we have a meet-up example for you i made an example to kind of illustrate this so in here we have a bootstrap template i had an edit user let's pretend this is a uh a social network that you're building right and this is your your accounts page where you update your username or something like that i don't know right and then also the other sidebar and you do see that we have nfabian you know here that by that's my twitter handler uh github that's how you contact me i probably should put that slide sorry uh in favorites here on the sidebar in the you know the body the main content and also the nav bar over there on the far right it was like hi fabian kind of see that sometimes right so we have it throughout the webpage correct uh if we did server side rendering let's pretend so this is just html don't worry like i want you if you can imagine what you know what it is i'm pointing at then that's fine just know that this is a span of the class of username info this is important for later on but i just want to say like okay this is hard-coded in the you know in the p-tech like my name right so this is server-side rendered what would end up happening is when you hit update on the form which is right here think of an html form right just before client-side running whenever you hit the submit or update what end up happening is the form gets sent up to the server and then the server responds back with uh hey you forgot to fill in this field so if you've experienced when you're uh you know when you're filling out like a 10 field you know form online to sign up for something more than like probably government forms when you whenever this happens and then also you hit submit all the page refreshes and a small little error box says hey you forgot to you know fill in zip code and all your text fields are empty you gotta do it all over again that's server side rendering that's what's gonna happen here whenever i hit update it's gonna go up to the server server's gonna spit back you know an html page and if it's up if it updates my name it's gonna update in all three locations you know the sidebar the uh the main body and the nav bar so now let's talk okay now let's talk about uh client-side rendering so we have the xml http request this is like i said this is straight vanilla javascript i'm true story i've never actually was able to make this work whenever i was when i was learning javascript and i didn't know what jquery was or you know what bootstrap is right you know i just saw this and i'm following those buggies the new boston tutorial and i could never get it to work to save my life i don't know those browsers or what but i end up you know just oh let me just copy this jquery thing and oh they have this ajax we'll talk about that later but just know that yeah this is going to be this is a vanilla javascript at its best so xml http request aka ajax it stands for asynchronous javascript and xml that's what ajax stands for i have actually never parsed a xml file in my life but that's what it stands for it's actually misleading this is on w3school ajax is a miss sleep it's a misleading name ajax applications might use xml to transport data but it is equally common to transport data as plain text or json so just it's a misleading name ajax is all you really got to know um like i said so what ajax allowed us to do it's going to talk about that is it allows us to communicate to a server without having to refresh the entire page so whenever you hit submit we can instead do instead of having to submit the entire form we can just hit this function here we can communicate to the server or to the url which is right down here and we can pass in all this mumbo jumbo i don't really need to know what's going on just know that like okay this is vanilla javascript ajax that it's you know it's bearish this is what it looks like another thing to know uh safari did not end this is where remember those dates i was talking about safari didn't implement this until you know uh 1.2 that was 2004. opera did it and operate in 2005 and internet explored in 2006. all right so let's see except i just want you to remember those dates all right so now we have this form again right so now with our vanilla javascript when you hit update we can instead do is we just run this javascript function this javascript function would do is communicate to the server hey is this is it okay to update their name right and the server says okay yes here's the updated name and then in one of these functions down here it's like line six now you can't see it uh what i do is i get the element by class name username info and i set the inner html to the updated username that's all i did and so that would then update it throughout my entire application cool right now let's talk about the framework era so where things are getting juicy really juicy so this is just a timeline i wanted to show you right look at the dates again 99 2004 2005 oh 2006 this thing called jquery comes out right remember all those timelines all those dates so the stakes is where the magic happened i don't know where i was at 2006 to be honest i think i was in middle school but i know it wasn't nowhere near a keyboard to develop um and then you know i had the rest but i just wanna show you there's a timeline that exists so the framework era what is the framework so it's a library that's all it is uh it's a way to help you organize applications right imagine if you didn't have a framework and you did it your own way with vanilla javascript when you came and looked at my applications and i did it my own way things look very different you wouldn't know what's going on so fortunately frameworks allow us to have some sort of you know common ground uh you know standardized standardization help collaborate and more importantly this is a really good point cross-platform compatibility as you wrote your own web before jquery if you wrote your own website you needed to make an api request when all those other browsers didn't implement the http or xml http request you have a lot of trouble right so having frameworks allowed us to have that cross platform and else to work on all the browsers it made code more reusable right it was really nice to just be able to go to you know your old project or on uh on stack overflow i don't even know if it existed yet and just copy the answer and paste and boom it worked right so that's what frameworks allowed us to do and then also allow us to build out communities and have some great tutorials it's really hard to learn um you know to learn how to do some of these things without a framework especially in javascript because if you go to once tutorials can be done one way and you go to another one completely done a separate way still experience i still experience that today um especially when i was like learning note but it's another day so now we're at our first battle right you've made it this far first blood oh it doesn't come out as smooth but this is a tropic thunder this is ben stiller he's drawing first blood right he's uh he's having some fun with his machine gun so let's choose a side you have prototype you have dojo you have mood tools and then jquery spoiler jquery wins we're not going to talk about all of them we're going to talk about jquery i don't care about the losers just jquery so jquery released in 2006 updates simplified javascript tasks things such as you know applying styles animations dom manipulation and then more importantly ajax like if you can think about it server or client side rendering aka the xml http request that didn't really happen a lot until jquery came out right and so when we saw jquery as a developer i didn't see it but i'm assuming with the javascript developers all the time when they saw they probably thought that's blue steel all right this thing is magic so let's talk about ajax right cause all the other stuff you kind of already know what's going on especially if you're doing react like it what you see it's influenced heavily by jquery so this is really like the grandfather of it all so let's talk about ajax remember this is what it looked like really really ugly yeah i really don't want to see this that's what it turned into that looks very similar to what you're used to like uh please pronounce axiom i've never used it but uh this is what you see in uh you know http with node uh when you see the dollar sign http in angular so this ajax very influential to all the future frameworks moving forward right so next time someone wants to challenge you on something you just bring that up even if it's irrelevant you're talking about cats or you know the rockets just point this and be like look this is what i know what do you know so jquery another important are the events this is really exciting this really did shape frameworks moving forward so what this is is this pound that we have here in front of us is it's an id on an html element and what it's saying whenever this element submits i want you to run this function so this was a form all you have to do is put an id on it and you can attach this listener very similar to what we see now uh and so here is you can get the value instead of doing get element by id you put in the id and you do enter html all that vanilla javascript that turns into this right here dollars you know pound updated username field dot val boom you got your input uh and put a text field and we're just console logging in well let's combine the two let's combine that event listener that we just saw and also venue ajax that turned the code into this it's really really small like i said you really don't have to know exactly what's going on except slides presentation would be uploaded afterwards it was really kind of small but uh just though it really shrunk down um it really shrunk down submitting the form and made it very reusable moving forward then peace was brought to the galaxy all was well we're like okay we're done like man that was a brutal battle but the internet seems like it's going it's not going to be changing anytime soon right and then the monolithic melee happened a lot of people were lost by the way he's not really getting shot is from uh tropical all if you can imagine all my war scenes are from tropic thunder unfortunately but they just really exaggerate the amount of times you got shot you've got like 10 more times before this so before we start talking about the actual frameworks there's something you know there's a topic that you need to go over this thing called mvc uh actually coming from ios i deal with nbc a lot and so it's kind of biased for me to be up here because i'm kind of on one side i just like it so anyways pretend you can hear that and we're going to talk about all the frameworks like the rest of the world saw them when they were released you know the golden you know silver bullets that they all were so nbc it's an architectural pattern not a design pattern these are some topics these are uh this is the material i want you to look into later on or whenever you're bored like okay i want to know about something cool and uh programming architectural patterns design patterns two very different things so architectural patterns are a way for you to separate your code base in uh in this case into either models views or controls it needs to fall under one of those three classes or one of those three components you have things like services you have all these other but mvc states that you will have a model a view and a controller and the way that information flows through them it's not very clear don't worry we'll we'll get into that later but just know whenever the javascript developers at the time saw that and like wow this is amazing because we've had jquery right but whenever i want to store user you know user email or user full name or information or state of the user i don't have anywhere to store it like i'd be really nice for me to have things like you know such a thing as a model or controller for me to like be able to separate my code in a way to where i can store user information you know over here and be able to manipulate the dom and you know pump different or pump my data into the view you know all you know with ease instead of doing it jquery way jquery said it was more of a utilities tool for you to manipulate the dom it really wasn't made to maintain user state or to be able to handle uh user state management would say it's not good for state management it's another term for you to look into later on um so the npc it helped with a separation of concern these are some like just programming uh some uh programming jargon or you know buzzwords and so it just means that your code really should be separated into a presentation layer a business layer or a data layer all right if it doesn't fall in one of those three then you're doing something wrong that's what nbc really likes to say in some way but i don't agree with it don't worry redux and all that answers it don't worry make sure i cover everything and so by the way this make sure okay so you want to make sure that your views and your controllers and your models are not are not typing coupled meaning if i were to copy this controller and paste it in this other project that it's not going to complain or don't ever say like hey i don't know what this model that you're talking about or that you're talking about right so it really mvc it's it really wants you to decouple your code but that isn't necessarily the case so let's choose a side so we're in the monolithic frame of the monolithic melee here so we got backbone js got ember we got angular there are a few others but these were you know for the most part were the three big players right and the developers at the time all thought this is all blue steel here all right this the this is what we're looking for so let's use an example let's use a to-do list i mean whenever you learn a new language one of the first things that you do is created to do a to-do list app so we're going to break down this uh app as uh as nbc so for sure we know that our entire uh website our entire view like that is a view right so therefore because we have a view here we need to have a controller we need to have a model even if we don't have anything in it you need to have it right so we have a view meaning we have a controller for the parent class then we also have an mvc here with uh the to-do list so we actually have a list and that means okay we're gonna have a list it's gonna have a table right and we're just gonna feed it in a model an array of to-do's and it's going to display it on its view and then lastly we'll be able to do all right to do we'll have its own view which is going to be a row it's going to have its own controller to be able to handle you know the delete on the right-hand side or the is complete on the left-hand side so it looks like we have like mvc all the way down right it looks really organized like it looks good like if i i can build this you know near spec with mvc and i don't think i'm breaking any kind of any code conventions or any walls right the thing about the thing about nbc that you need to know is uh another term i mentioned separation concerns and also there's another term called single responsibility principle what it means is your code should only be uh should only be in charge above excuse me you should only be in charge of one thing and that's it right so we have a main or if you have an app controller that's controlling the entire app right but it doesn't have control over the uh over the items inside of the list controller right it only needs to worry about the entire view any anything anything that happens there right and so as you as you'll get smaller and smaller the to-do controller the actual row should not communicate back up to its parent or the to-do list controller should not communicate down or up but you should just have you said single responsibility principle it's part of this solid programming term i forget what's acronym that's something for you to look into later if you want so let's look at how all these frameworks should do doing so this is backbone it doesn't actually follow nbc so sorry i lied to you there's no controllers you have a model you have a view controller but already a red flag kind of uh you know a red flag gets thrown up with the events over here on line four it's a view look at line one backbone.view dot extend right then you have events meaning this view is handling events which as you as we remember a view should only be a single responsibility principle should only be responsible for displaying the data and that's it the controller should be in charge of handling events and how it should mutate the view or if it needs to update the model so already you know this is going on okay well hey the developers at the time didn't know that that's fine as an ios developer i know this i hate nbc we deal with this all the time actually in ios mvc stands for massive view controller so it's kind of funny how we just kind of throw everything in the controller and that's a real thing if you google it you will find it so now let's talk about amber amber by far is the closest to nbc so you have a model you have the view and it actually uses handlebar js to uh render out its views and so it just means it allows you to put javascript inside of your xml or inside your html any other controller this actually looks really good i don't have anything bad to say i don't have any experience with backbone or amber angular i do but so from what i see it's actually pretty good now we have angular i actually have i before doing react i had done angular for probably like three years i made all my websites i even made a website for a client in angular and i'm looking to you know change that to rio to react but uh so what made angular interesting is that 2a data binding i don't necessarily know backbone and amber had that out the box at least the way that angular did but what it meant is unless you got a text field and you're inputting information and you had a label where it's excuse me you had a you know a p tag you know some text over here you can set up your controller to where whatever you type inside the text field the uh the labor the text on the other side will update that was really cool remember when i first saw that i'm like that is awesome i love angular not really knowing what was gonna happen later on because when you have a simple to-do list that that's oh man that's that's gold once you get to a real life application which we will in a bit you're going to see how that backfires pretty quick so think about angular i know if anyone here has experience with it or for those who don't so this was another thing that i didn't know you know a lot of developers didn't know the problem at the time so this is my to-do right it's uh open brick open bracket my dash to do snake case right well when that's how you use it right and this is the director this is the html this is the component that you're used to seeing and react right it doesn't just so you just have a small bit of html and whenever you call whenever you use you know this html element it's just going to replace it's going to replace this with that sorry i don't know why it took me so long to say but it's just and so now in order for your javascript to know that it exists you need to have a directive and what this tells us what this does javascript program is like hey if you're going to have a file on line five it says it's going to be to do tpl.html federal tpl that was my personal preferences i like to sub uh sub categorize my my uh my files so it knows that it's looking for that file and remember how this is my dash to do well over here on line two it's actually camel case that was one of the worst things in angular that i felt like i always whenever a directive or a component didn't you know show up on the view the very first thing is i probably messed up on my navy because in javascript it needs to be camel case but in html it needs to be snake case that was the worst thing and then what sucked is whenever i would go back to angular i would always forget and i would just be going in through stack overflow then realizing 20 minutes later that like oh i need to do that and then finally you have a controller as you see there is no model it's and there's no models it's just you know views and controllers and at the time i didn't really know what mvc was so i didn't really know supposed to have it but if i was going into angular today i would think to myself where do i store my data there's a huge learning curve i remember that i would fight and get to my angular programs or i felt like weeks until finally things started clicking you start learning things the angular way and then so views there's just a lot of work so of the three or excuse me of the four screens you see here three of them belong to just views you gotta do all this just for review i didn't know that that was a lot of work at the time i just you know i just learned what jquery was uh yeah that was angular so let's do a real world application right so let's just disregard the names just like okay amber backbone and angular right and these were when i say monolithic frameworks what i meant is that these are uh all in one solution for you okay i mean with react reacts very good about like oh if you want to use jquery with react it can work it can work in angular it can work with just regular plain vanilla javascript but with these other frameworks for example with meteor with meteor if you've had a meteor project if you wanted to use something i'm just going to throw a framework under the buster let's say you wanted to use underscore right you needed to find the under the meteor version of underscore you always need you could just throw in any javascript class or any javascript library in with your monolithic framework oh i remember with angular if you had jquery things broke all the time um so real world application right don't worry we're not looking at any code right so let's break down this this example using empty nbc architecture so we're gonna bring it center we have one npc here right so we have the main body then we have another npc here on the sidebar right so that we can handle you know my name here let's say his friends had like parentheses and it said like oh you have 400 friends right so it controlled yeah i had a controller for all this information and a controller for all this information here in the in the main body oh and then also we need a controller for the nav bar too right it's like alright cool like i was able to split up my application into the section and it looks it looks good yeah well okay well now let's let's go and implement some of the code for me to update the text or update the username right there's no models remember that okay when i hit update it updates it here but oh wait oh y'all see the problem uh i need to update it over here in this controller and also in the nav bar but then that breaks our single responsibility principle that we had mentioned earlier like i the controller shouldn't communicate to other controllers it shouldn't communicate up so if let's say we had a parent controller around this this controller should not communicate back to the parent for the parent then to tell the other one like that's already we're in a bad spot we're like okay you know what all right fine i'm just gonna do this one time four hours later you're gonna do it about ten more times and then two months later you're going to be coming across some code you're going to come across a bug like how does this even happen not realizing that you have this thing called side effects that are happening in your code when you update it here all of a sudden you have a side effect on the other side of your application that updates and you're just like i don't know where this book came from so this is this is the problem that you have that you come across with nbc especially in javascript especially with ios so let's rewind real quick during this while you're developing this application and your mvc monolithic framework you're thinking you're like this you're having fun everything's awesome everything's groovy right not really knowing what you were doing is this you're just you just set yourself up to fail so bad like as i did with my angular application that is gasoline now the next scene is when things go up in flames but they didn't have a gift that had all of it so plus i wouldn't put it down i'll say one more time okay so the issue is to go back controllers get bloated because really they're in between the models and the views so by nature we want to just like oh we'll just throw this in this controller not really thinking that like oh it really needs to be somewhere else but wait it needs to either be a model of you or a controller so i kind of don't know where to put this things like oh i need to make a quick api call to you know send up you know analytics or something right as soon as you do that you broke the single responsibility principle you should your controller should only control what uh it is i guess classified so or whatever components it is in charge of but oh also data bindings data binding is bad at least for me every single time someone says like observable to me it kind of like gives me a you know i start getting this pain in the back of my neck when i hear observables it's not a bad word or anything and it's still used very much today there's very valid use cases but i just automatically think about two-way data binding and i just remember you know the headaches that came with that but don't let that discharge you like we'll fame you i followed the diagram like well how come it's not working well the thing is nbc if you remember the photo that you saw earlier that was this top one and if you look at the arrows the way they're communicating is one way right if you look at these other ones these are still mvc patterns as you can kind of see there really is no set standard on how how your application communicates between your models your views and your controllers so for example this view actually observes the model and it communicates back to the controller but then also the controller communicates down to the model which is being observed by the view the controller also updates with what this is what i'm talking about like there is especially when you look at apple's documentation and bring up a model view controller it's just it's an idea that us developers fell in love with not really understanding the repercussions of it because we really don't have a set standard of this is the way you communicate and also when nbc was created uh it was created small talk or with small talks of programming language back in the 70s i believe um back then the things such as the internet didn't exist web browsers like mvc was meant to be you know very small components like i feel when we're developing when uh we're developing out these frameworks or you know when we have this problem we just you know like oh nbc like we have a model future let's just let's just use that i don't i personally don't believe it was meant for its use case today but that is uh that's to be seen so lastly my other issues that i had and this is what react answered for me look at the way the html is like it really does this is invalid html when you see ng repeat if this is a string like framework and framework so that's not valid html at all what this does is this does a loop um so this is a problem that i had uh material over and so when we talk about let's say we talk about react in the next section know that the standard or the best practice was to have your html in a separate file within your javascript having the having html in your javascript was bad you didn't do that if you did that that was rookie so now we're at the clash of the components this is the war that we're in now people prepare yourself i don't care if you're tired all right you need to get up continue moving so clash of the components we got react blue and polymer um i was going to talk about react not just because well hey we're in a you know a react meetup that has nothing to do with the fact that i don't have any experience with blue or polymer either but it's mostly because we're in a react meetup right so with react it was announced in js comp 2013 as you see it's it's underlined if you have not seen this conference or at least the announcement of it i suggest you do so it's like really it's crazy whenever you see the announcement of some of these things it's like when you're out here re-watch the uh announcement of the iphone like it was crazy seeing people's reaction whenever they did the pinch to zoom people lost it they're like oh my god it's amazing right well that was the same thing happened 2013. now it's normal to us but back then it was groundbreaking right so react it discourages mutation uh it renders a dom like a server-side render uh if you remember server-side rendered a rendering as we mentioned right like you hit the server and the server re-renders the entire page well it's kind of similar to that if you think about it right just only running on your client and code becomes more predictable uh since you break everything down in such a way to where okay it's just the view right and we stepped away from the you know so uh one size fit all or you know a solution for all your problems with the whole monolithic era now we're in just the view okay i want to decide how i architect my code and so back in uh the jsconf 2013 this was the actual slide that was used and uh as tom aquino at least how you pronounce his last name tom appino don't worry i said this is gonna be the lyrics like i watched all his talks he's really a very good presenter but really interesting stuff uh so they said that we took a huge step backwards in terms of the main tillage maintainability of our code simply because we were embedding markup inside of our javascript so remember remember that slide i showed you before where the html was separated from the javascript well that was because that's what the standard was for years react completely just you know made everyone rethink the way things were done and they actually had you know people tweeting saying that what the hell is facebook doing like what is this this is bad and then entered redux right or flux right because it discouraged mutation this is actually a uh a functional uh assuming redux was inspired by the elm architecture which is a unidirectional theta flow these are just terms this is jargon terms but it just means that like okay the whole two-way data binding that doesn't exist anymore whenever you mutate something or you change something you make an announcement and this announcement then goes to a reducer and then a reducer goes down to the store and the store updates and then that causes a re-render right the way that the flow is actually going to be the next slide this is a unidirectional flow of data you hear the term called pure function what that means is you never mutate the object that's being you know that's being input into the function you always return a new object so the redux the unidirectional data flow influenced by the l architecture up and go over make sure okay and so when you update things like state this is why react is so scalable right with mvc or you had other previous frameworks you end up having these you'll go really really fast building up right and all of a sudden you reach a plateau and no matter what you have the uh i think it's the someone pregnant what's the it's not the end man or whatever the ghost where like once you add people you actually start slowing down forgot the terms but with this as uh as top of keynote mentioned they actually sped up creating features because code becomes more predictable with react and redox or flux um i'm sure just talk about your function okay so now what's next like what do i think is next i said this is subjective i'm an ios developer for one i actually think something that i learned uh really early on is that history repeats itself no matter what whether it's in programming and human nature history always repeats itself right now we're talking we're going crazy over these you know functional way of programming well that existed a long time ago way before i was born so why are we now making a big deal about it you simply do is we grab something that's already existed and we you know wrap it up and call it something new and we throw you know an electron or a neutron symbol on it it's like boom create a new framework right so let's just think about like okay we just had we went to this utilities framework and went through the mvc uh era then now we're at the view right i personally feel the next thing that's going to go is going to be data not go but i mean what's going to be reinvented is data uh i'm hoping or predicting i don't know uh that we will move away from apis and start moving towards web sockets things because right now the world is all about real time right like i want to get notification i want it now okay apis don't really uh give me that unless i do you know constant polling of me of my api so i feel web sockets is going to be the way right instead of updating user information through an api we're actually going to send it off through a websocket and update it right then it's going to update all your phones uh so that's one thing that i'm assuming we're going to go as far as like who's going to come out winning from the component clash of the components i honestly think it's going to be react not because i'm going to react meet up but because coming from the ios space i know how much how much work goes into just creating an ios app in terms of like there's a reason why phonegap or cordova don't work it's because and why react has become so successful with react native is because react native actually communicates down to the javascript core library and it's a library inside of ios that allows objective-c or swift code to execute javascript and vice versa right so that's how react native in a nutshell works so boo and polymer they've got a long way to go if they're if they have even if they even think they're going to be competing with uh react native in the future right and so i feel that since everything's moving in mobile that for as a developer i imagine in five years now a single javascript developer will be able to create applications for you know of course the web mobile using react native uh actual platforms using your react native or something like electron so that's where i feel that that's going um and so i mentioned like history repeats itself right so with that you see yeah i'll just leave it at that uh so the last thing is topics and people right so the people that i really find influencers people that i like watching talks over when i go on youtube and as like to recommend it if i see tom aquino's name i'm stopping what i'm doing and i'm watching this video really good presenter he's the manager of the react team right pete hunt is also part of the reacting has some really good presentations uh especially during the 2013 2015 uh those presentations were really good because that's whenever you know the world the javascript world was really changing uh to how we know today so brandon he's actually the creator of javascript robert uncle bob martin this guy is amazing he's funny too uh he if you want to know about architecture you're going to learn about things like mbbm mvc mvp talk about things called vipers and ios uh anything like architecture will start like getting you know want to become not only a better developer but really understanding and be able to talk the jargon robert uncle bob martin is your guy john reed he actually comes from an ios background but most of his presentations go over concepts like you know architecture test driven development he is very good and they also talk they all talk about nbc not the negative not the negative like that i did but they explained since they were alive during its creation they explained what its actual intent was uh lastly like douglas crawford he is uh actually just started watching durian while creating this presentation he actually kind of goes hand in hand with brandon he a lot of his talks are on the early days of javascript this is where i learned a lot of the you know the browser wars and you know what equal script how that all kind of transpired topics and like i said i'm going to be posting this on the web for you to you know later later click on or later do research on but the topic is unidirectional data flow architectures in javascript and some must watch videos for all javascript especially react developers are the shooting white i'm sorry this is like of the ugly yellow that's really hard to see but it's going to be the jscon 2013 and that's when react was being announced and also the hacker's way of rethinking web development at facebook this was uh eye-opening i remember whenever i was applying this you know these type of architecture like redux and flux to ios i didn't really understand it i just knew it was what i needed for my team uh so these videos really did help you know help me understand what was going on what's up how we got to where we are today so last stop granted does anyone have any questionsso hello y'all this is a good way to start off a presentation um today i'm going to be talking to you about the history of front-end frameworks uh this is actually i feel that it's a pretty important talk not because i'm presenting it only because the material that uh i'll be going over today really does help uh it helps explain shape explain why things are the way they are now with javascript you know like i'm assuming there are some developers out there that go on stack overflowing and uh you know as they're looking for the answer they see jquery and they're like what's jquery how does that fall into react or you know they talk about state like what is state like how old i'm hoping tonight we'll be able to uh i'll be able to explain that and help answer some of those questions you may have uh so first of all i wanted to uh thank the houston react meetup group for allowing me to present tonight uh i also want to thank y'all for coming out the last thing that i want is for someone in this room to walk away thinking that you know man that was a waste of time so i really i tried to or i made this presentation uh with the mindset that though there are you know many types of developers in this room from you know uh developers that are self-learning developers that are currently in boot camps to you know developers that have been doing this for decades now so i really feel that people or everyone here will walk away with something another i guess another housekeeping i guess i want to tell y'all tonight we are recording tonight's presentation so in case that you missed something or if you want to follow up on some of the topics i'm going to be talking about know that i will be posting it on the meetup group either later on this weekend or maybe even tonight i don't know yet uh make sure i'll go over everything and then also since another thing i want to mention we can hold all questions to the end just so that we can kind of have like a q a group discussion on some of the questions y'all may have so with that let's get started oh i think i need to click on the presentation there we go so as i mentioned my name is fabian pontello uh plot twist i'm actually an ios developer at taiwan yeah hold y'all um so uh at chai once here in houston we're a digital innovation agency uh we work with most most of our clients are in the enterprise space and what's really cool is because i work on those type of projects i come across some really interesting problems that a lot of people a lot of you know average adult developers won't come across um so things like you know some of the topics i'll be talking today things like architecture uh things you know those topics are before i didn't know anything about it now i'm very very comfortable uh comfortable with them and then also okay so as far as my gloves javascript swift and accidentally hit the space bar twice but uh this is going to be a ben stiller theme presentation i wanted to have some fun with it and uh so i felt you know earlier this week i came across a ben stiller gift i'm like yes this is what i want to have in a presentation like i could really make a story line with ben stiller not it's not that he's my favorite actor or anything he just has some really funny movies so hopefully you know if you don't walk away with something presentation you at least walk away wanting to see one of his movies right so let me hit i'm gonna get you one more time there you go so some of the questions you might be asking yourself you know what is ajax what does state mean what is this thing people say is nbc what is that i don't know why are there so many frameworks and then also what is ecmascript like how does all this tie in together so if you have some of those questions great i really hope that i answer them and if not i afterwards i can answer them i provide you the tools so you know find those answers so let's go over our agenda first foremost what is javascript and why why does it exist then we're going to talk about before the before time and with that we're going to be talking about web versions ecmascript the browser wars it's a really interesting battle been you know took place in the mid 90s or mid 90s to the early 2000s a lot of casualties then afterwards we're going to talk about the before time and then which we're going to be talking about server side rendering and client-side rendering now one thing i want to mention the material that we're going to be going over in these two sections are in no particular order it's just information that you need to have that just because you know the come before ecmascript doesn't mean that it happened before it's just you know information that you need that would want for the audience to know uh before we get to our next section which is the framework era all right so i really had some fun with uh this section here and i realized like we have we had all these battles or wars in between these frameworks right and if no one gives them a name like i'm going to and i'm going to name him whatever i want to call them right so i'm going to call the first war first blood right this is going to be your jquery's your mood tool dojo then someone can i think or if you can already think of what the next war is going to be the mona oh kind of kind of got cut off there but it's the uh the monolithic melee okay i try to have you know some some fun with them and then last is going to be the clash of the components so these are all wars right now we're currently in the third war i don't know if you know this but the first two happened and if you missed it don't worry i'm going to recap what you missed out on all right and then after that what's next like okay fabian we just had these three wars we're in the middle of the third one i'm tired what's coming down the pipeline this is actually going to be my opinion so as i mentioned a few slides i'm an ios developer so my opinion i don't really have a lot of weight behind it but from my observations what i've seen i feel i kind of have an idea where we're going uh next we're going to have the follow-up topics these are just going to be it's going to be a slide that's going to have everything i talked about briefly along with names some videos there are some must watch videos if you're a javascript developer especially a react developer and then lastly we're going to be going we're going to have questions sound good so first what is javascript and why so it was created in 1995 by brennan i when you say his name he worked at netscape it was developed in 10 days think about what you did 10 days ago we're thinking about what's like what's 10 days from now it's going to be what not this sunday the next or next two saturdays from now imagine you create an entire language so next time someone starts you know batching up javascript say hey i want to know how well of the language you could have made in 10 days right next thing netscape and sun's lab joined forces against microsoft so what why this is important is remember brandon brandon you worked for netscape right and so right now this was happening during the early browser wars uh we had you know you had microsoft you had or internet explorer netscape you got a few other browsers and they're all pretty much fighting for you know what's going to be the main browser little did they know this thing called chrome was going to be coming out later but uh for right now they have no idea right so they're all fighting so netscape and sun's lab given the fact that they're much smaller than microsoft they actually join forces like okay hey um we needed to have we need to have this uh this actually the uh the next slide so why was it made to make the to make a browser you know interactive right and so they joined courses to create javascript or javascript was created here and then they later joined some labs you know kind of joined the cause like okay let's let's plain javascript like this is what we're going with is where we're putting all our easter eggs in let's go with that that's the only way we're gonna be able to compete compete with microsoft and whatever you know monster they come out with right so by the way this this whole what's going on this really should be its own talk this reason why i'm briefly going over it like i could spend probably another two hours talking about it just knows a lot of information don't worry the names for you to look into like uh brandon and then another one don't worry it's gonna be later on in the slides but this is really really interesting what happened here i feel everyone should know this but don't worry for today just know a few of these items right and like this next one right here sun's lab playing ownership of the javascript trademark so why is that important well this is why the standard's called ecmascript and not javascript so i mean you know we have like uh es5 es6 esm there's a reason why it's not js5 or javascript one javascript five dollar script six like we have like ruby one ruby two swift one swift two right um so because sun's lab had claimed ownership of it whenever netscape went to uh standardize the language well they ended up at the european computer manufacturer of european commuter manufacturers association don't worry like i said there's some things to be able to learn at a later time fortunately and they couldn't call it javascript and so they ended up falling on the decision that like you know let's call it ecmascript and so for the longest time me as a javascript developer i'm like what is es5 like i was just been doing javascript also if you were talking about this ethyl script like what is it it's the same exact thing the only reason why it's not it's javascript echoscript js jstrip it's all the same thing trademarks the reason why we can't call it javascript i don't know what it is now like that's still the case but that's the reason why we are where we are now uh so this is a bit of a timeline don't worry you don't have to know what's going on here or but just know you know from 1999 all the way to i believe i think it goes down to 2016. a lot happens here right so we have like the creation of some of these browsers as well as some frameworks you know html5 angular is somewhere there i know i saw it earlier we have rails at jquery here over here in 2006. so just know there's a lot that's going on by the way like right now we're kind of like circling this area here right but just uh keep in mind 2006 that's a that's a pretty important year for a javascript developer so just keep that in the back of your mind so before the before time right like i said this is these are some items that aren't in any particular order these except these are just this is just material that i would like for you to know before you get to the framework era so web 1.0 what that means no dynamic content you know what that means don't worry what 2.0 will explain that i didn't know what it meant uh javascript and css are still you know little babies they don't really have they still don't know who they are what they do really and the major players were netscape and internet explorer and to kind of give you some context i bet you're trying to wonder like what was i doing in 1990 or like what was what was happening what can i kind of like you know attach myself with and remember what it felt like to be in 1990s well around this time ben stiller was filming happy gilmore so in case you you know next time you see this movie just remember oh hey web 1.0 that was at the same time so the next one with 2.0 right so it added dynamic html it means javascript and css can manipulate the dom like cool like that that's react in a nutshell really right so this was in the early 2000s uh drag and drop animation you know some examples are going to be like amazon wikipedia youtube so this is in the 2000s right so you can kind of remember like okay what can i attach myself to remember like oh this is when web 2.0 came out well that's when stark skin hutch came out all right so next time you see that movie you know it really takes place in the 70s right or 60s i think 70s just know that oh web 2.0 was around this thing you know around the same time so this is now okay like i said nothing's in any particular order it's just information that i needed to bring to your attention so ecmascript right so now we have this is really really cool i didn't i did i learned this while doing research for this presentation so v3 1999 right v4 there's a reason why you don't hear es4 right i don't know if you ever look looked into it but it doesn't exist it was abandoned actually right so then you have b5 and 2009. look how there's a 10-year gap here right look at these look at the dates the stronger makes america 2006 right like all these uh things detective here right v5 2009 5.1 2011. this is actually pretty important as well you know when you use the use strict in your javascript that's actually the standard that they fall on uh which i mean it falls on version 5.1 that standard so some of the ugly parts of javascript that they really want to do away with actually gets you know gets declared here in 5.1 uh then you have v6 v7 vn you kind of know from there but there's all this ef stuff right so remember it's ecmascript only because sun's lab had the trademark to be you know had the javascript trademark so whenever they had to create the standard for it they're like okay well let's just call it ecmascript very confusing i'm not gonna lie i didn't learn it until i did this presentation so then now okay that's some information that you know right remember remember those dates i was talking about right now let's enter the browser wars right and so this graph actually ends in 2008 which is when chrome was created i think you can kind of know what happened from there as far as you know who was winning or who started winning from there but let's let's uh not knock the line i couldn't find one that had 1990 you know from the 90s all the way till today so i had to just you know this was more important at the time of course so just know 2008 chrome got created things changed again but uh okay this is the timeline from 1994 to you know 2008 right if you look back this time 99 2009 right things are starting to timelines are starting to uh line up here right so this is what i found very interesting i'm going to read it to you having 10 years in which nothing happened allow for the language to become stable douglas proctor and so what he what he was talking about was this right here i was talking about browse awards right what was happening then was all these browsers you know firefox internet explorer netscape they're still figuring things out especially in the javascript world especially now okay we thought browser compatibility was bad now back then was worse what would have made things 10 times worse is if we had new versions of javascript as these browsers are trying to you know figure things out and try to make things compatible right so it was good it's great that we didn't have a es4 because that would have i don't even know what would have happened might you might have been right in the uh you know front end in java or c or something i don't know but just know that you know these browser boards and the ecmascript you know it all kind of ties in together just i would have hated to work on javascript during this time this is just a headache so it's good so now okay that was some information right like i said you just needed to know that as we're getting into the not this section but the next okay so now we're at the before time so before time i want you to think we're not the frameworks yet we're not a jquery we're just in vanilla javascript right so some terms i want you to know are server-side rendering and client-side rendering so server-side rendering the logic existed i'm going to explain these two so server-side rendering logically existed on the back end it's very expensive what i want you to think of you can rewind the clocks real quick to you know early myspace days or late my space days or early facebook days where you know you're standing there in your profile and you're waiting for you know a new notification and you're like okay command r let me refresh it right and all of a sudden boom you have a new comment or something right but you wouldn't have seen it unless you refreshed it right that's server-side rendering that means all everything that you see on the screen is actually is actually being computed or created on the server and the server that fits that to your browser right then you have client-side rendering client-side the logic exists on the client this is what we are experiencing now this will you know react angular move all that's where you check to see okay is the user logged in the user's logged in let me show them this view because the user not logged in okay i'm going to show them the login screen that used to happen on the server now it happens on the client the reason why i was expensive let's pretend you know you have your little your little website that unfortunately it's just you and your mom that visit right that's not really that expensive but if you think about facebook or somebody's major you know youtube they did server-side rendering imagine having to spit out for millions of requests every single day you know the entire web page it's pretty expensive um so that's the reason why client side exists so like i said this this is going to come into play later this is going to um this is important when we start talking about ajax so we have a meet-up example for you i made an example to kind of illustrate this so in here we have a bootstrap template i had an edit user let's pretend this is a uh a social network that you're building right and this is your your accounts page where you update your username or something like that i don't know right and then also the other sidebar and you do see that we have nfabian you know here that by that's my twitter handler uh github that's how you contact me i probably should put that slide sorry uh in favorites here on the sidebar in the you know the body the main content and also the nav bar over there on the far right it was like hi fabian kind of see that sometimes right so we have it throughout the webpage correct uh if we did server side rendering let's pretend so this is just html don't worry like i want you if you can imagine what you know what it is i'm pointing at then that's fine just know that this is a span of the class of username info this is important for later on but i just want to say like okay this is hard-coded in the you know in the p-tech like my name right so this is server-side rendered what would end up happening is when you hit update on the form which is right here think of an html form right just before client-side running whenever you hit the submit or update what end up happening is the form gets sent up to the server and then the server responds back with uh hey you forgot to fill in this field so if you've experienced when you're uh you know when you're filling out like a 10 field you know form online to sign up for something more than like probably government forms when you whenever this happens and then also you hit submit all the page refreshes and a small little error box says hey you forgot to you know fill in zip code and all your text fields are empty you gotta do it all over again that's server side rendering that's what's gonna happen here whenever i hit update it's gonna go up to the server server's gonna spit back you know an html page and if it's up if it updates my name it's gonna update in all three locations you know the sidebar the uh the main body and the nav bar so now let's talk okay now let's talk about uh client-side rendering so we have the xml http request this is like i said this is straight vanilla javascript i'm true story i've never actually was able to make this work whenever i was when i was learning javascript and i didn't know what jquery was or you know what bootstrap is right you know i just saw this and i'm following those buggies the new boston tutorial and i could never get it to work to save my life i don't know those browsers or what but i end up you know just oh let me just copy this jquery thing and oh they have this ajax we'll talk about that later but just know that yeah this is going to be this is a vanilla javascript at its best so xml http request aka ajax it stands for asynchronous javascript and xml that's what ajax stands for i have actually never parsed a xml file in my life but that's what it stands for it's actually misleading this is on w3school ajax is a miss sleep it's a misleading name ajax applications might use xml to transport data but it is equally common to transport data as plain text or json so just it's a misleading name ajax is all you really got to know um like i said so what ajax allowed us to do it's going to talk about that is it allows us to communicate to a server without having to refresh the entire page so whenever you hit submit we can instead do instead of having to submit the entire form we can just hit this function here we can communicate to the server or to the url which is right down here and we can pass in all this mumbo jumbo i don't really need to know what's going on just know that like okay this is vanilla javascript ajax that it's you know it's bearish this is what it looks like another thing to know uh safari did not end this is where remember those dates i was talking about safari didn't implement this until you know uh 1.2 that was 2004. opera did it and operate in 2005 and internet explored in 2006. all right so let's see except i just want you to remember those dates all right so now we have this form again right so now with our vanilla javascript when you hit update we can instead do is we just run this javascript function this javascript function would do is communicate to the server hey is this is it okay to update their name right and the server says okay yes here's the updated name and then in one of these functions down here it's like line six now you can't see it uh what i do is i get the element by class name username info and i set the inner html to the updated username that's all i did and so that would then update it throughout my entire application cool right now let's talk about the framework era so where things are getting juicy really juicy so this is just a timeline i wanted to show you right look at the dates again 99 2004 2005 oh 2006 this thing called jquery comes out right remember all those timelines all those dates so the stakes is where the magic happened i don't know where i was at 2006 to be honest i think i was in middle school but i know it wasn't nowhere near a keyboard to develop um and then you know i had the rest but i just wanna show you there's a timeline that exists so the framework era what is the framework so it's a library that's all it is uh it's a way to help you organize applications right imagine if you didn't have a framework and you did it your own way with vanilla javascript when you came and looked at my applications and i did it my own way things look very different you wouldn't know what's going on so fortunately frameworks allow us to have some sort of you know common ground uh you know standardized standardization help collaborate and more importantly this is a really good point cross-platform compatibility as you wrote your own web before jquery if you wrote your own website you needed to make an api request when all those other browsers didn't implement the http or xml http request you have a lot of trouble right so having frameworks allowed us to have that cross platform and else to work on all the browsers it made code more reusable right it was really nice to just be able to go to you know your old project or on uh on stack overflow i don't even know if it existed yet and just copy the answer and paste and boom it worked right so that's what frameworks allowed us to do and then also allow us to build out communities and have some great tutorials it's really hard to learn um you know to learn how to do some of these things without a framework especially in javascript because if you go to once tutorials can be done one way and you go to another one completely done a separate way still experience i still experience that today um especially when i was like learning note but it's another day so now we're at our first battle right you've made it this far first blood oh it doesn't come out as smooth but this is a tropic thunder this is ben stiller he's drawing first blood right he's uh he's having some fun with his machine gun so let's choose a side you have prototype you have dojo you have mood tools and then jquery spoiler jquery wins we're not going to talk about all of them we're going to talk about jquery i don't care about the losers just jquery so jquery released in 2006 updates simplified javascript tasks things such as you know applying styles animations dom manipulation and then more importantly ajax like if you can think about it server or client side rendering aka the xml http request that didn't really happen a lot until jquery came out right and so when we saw jquery as a developer i didn't see it but i'm assuming with the javascript developers all the time when they saw they probably thought that's blue steel all right this thing is magic so let's talk about ajax right cause all the other stuff you kind of already know what's going on especially if you're doing react like it what you see it's influenced heavily by jquery so this is really like the grandfather of it all so let's talk about ajax remember this is what it looked like really really ugly yeah i really don't want to see this that's what it turned into that looks very similar to what you're used to like uh please pronounce axiom i've never used it but uh this is what you see in uh you know http with node uh when you see the dollar sign http in angular so this ajax very influential to all the future frameworks moving forward right so next time someone wants to challenge you on something you just bring that up even if it's irrelevant you're talking about cats or you know the rockets just point this and be like look this is what i know what do you know so jquery another important are the events this is really exciting this really did shape frameworks moving forward so what this is is this pound that we have here in front of us is it's an id on an html element and what it's saying whenever this element submits i want you to run this function so this was a form all you have to do is put an id on it and you can attach this listener very similar to what we see now uh and so here is you can get the value instead of doing get element by id you put in the id and you do enter html all that vanilla javascript that turns into this right here dollars you know pound updated username field dot val boom you got your input uh and put a text field and we're just console logging in well let's combine the two let's combine that event listener that we just saw and also venue ajax that turned the code into this it's really really small like i said you really don't have to know exactly what's going on except slides presentation would be uploaded afterwards it was really kind of small but uh just though it really shrunk down um it really shrunk down submitting the form and made it very reusable moving forward then peace was brought to the galaxy all was well we're like okay we're done like man that was a brutal battle but the internet seems like it's going it's not going to be changing anytime soon right and then the monolithic melee happened a lot of people were lost by the way he's not really getting shot is from uh tropical all if you can imagine all my war scenes are from tropic thunder unfortunately but they just really exaggerate the amount of times you got shot you've got like 10 more times before this so before we start talking about the actual frameworks there's something you know there's a topic that you need to go over this thing called mvc uh actually coming from ios i deal with nbc a lot and so it's kind of biased for me to be up here because i'm kind of on one side i just like it so anyways pretend you can hear that and we're going to talk about all the frameworks like the rest of the world saw them when they were released you know the golden you know silver bullets that they all were so nbc it's an architectural pattern not a design pattern these are some topics these are uh this is the material i want you to look into later on or whenever you're bored like okay i want to know about something cool and uh programming architectural patterns design patterns two very different things so architectural patterns are a way for you to separate your code base in uh in this case into either models views or controls it needs to fall under one of those three classes or one of those three components you have things like services you have all these other but mvc states that you will have a model a view and a controller and the way that information flows through them it's not very clear don't worry we'll we'll get into that later but just know whenever the javascript developers at the time saw that and like wow this is amazing because we've had jquery right but whenever i want to store user you know user email or user full name or information or state of the user i don't have anywhere to store it like i'd be really nice for me to have things like you know such a thing as a model or controller for me to like be able to separate my code in a way to where i can store user information you know over here and be able to manipulate the dom and you know pump different or pump my data into the view you know all you know with ease instead of doing it jquery way jquery said it was more of a utilities tool for you to manipulate the dom it really wasn't made to maintain user state or to be able to handle uh user state management would say it's not good for state management it's another term for you to look into later on um so the npc it helped with a separation of concern these are some like just programming uh some uh programming jargon or you know buzzwords and so it just means that your code really should be separated into a presentation layer a business layer or a data layer all right if it doesn't fall in one of those three then you're doing something wrong that's what nbc really likes to say in some way but i don't agree with it don't worry redux and all that answers it don't worry make sure i cover everything and so by the way this make sure okay so you want to make sure that your views and your controllers and your models are not are not typing coupled meaning if i were to copy this controller and paste it in this other project that it's not going to complain or don't ever say like hey i don't know what this model that you're talking about or that you're talking about right so it really mvc it's it really wants you to decouple your code but that isn't necessarily the case so let's choose a side so we're in the monolithic frame of the monolithic melee here so we got backbone js got ember we got angular there are a few others but these were you know for the most part were the three big players right and the developers at the time all thought this is all blue steel here all right this the this is what we're looking for so let's use an example let's use a to-do list i mean whenever you learn a new language one of the first things that you do is created to do a to-do list app so we're going to break down this uh app as uh as nbc so for sure we know that our entire uh website our entire view like that is a view right so therefore because we have a view here we need to have a controller we need to have a model even if we don't have anything in it you need to have it right so we have a view meaning we have a controller for the parent class then we also have an mvc here with uh the to-do list so we actually have a list and that means okay we're gonna have a list it's gonna have a table right and we're just gonna feed it in a model an array of to-do's and it's going to display it on its view and then lastly we'll be able to do all right to do we'll have its own view which is going to be a row it's going to have its own controller to be able to handle you know the delete on the right-hand side or the is complete on the left-hand side so it looks like we have like mvc all the way down right it looks really organized like it looks good like if i i can build this you know near spec with mvc and i don't think i'm breaking any kind of any code conventions or any walls right the thing about the thing about nbc that you need to know is uh another term i mentioned separation concerns and also there's another term called single responsibility principle what it means is your code should only be uh should only be in charge above excuse me you should only be in charge of one thing and that's it right so we have a main or if you have an app controller that's controlling the entire app right but it doesn't have control over the uh over the items inside of the list controller right it only needs to worry about the entire view any anything anything that happens there right and so as you as you'll get smaller and smaller the to-do controller the actual row should not communicate back up to its parent or the to-do list controller should not communicate down or up but you should just have you said single responsibility principle it's part of this solid programming term i forget what's acronym that's something for you to look into later if you want so let's look at how all these frameworks should do doing so this is backbone it doesn't actually follow nbc so sorry i lied to you there's no controllers you have a model you have a view controller but already a red flag kind of uh you know a red flag gets thrown up with the events over here on line four it's a view look at line one backbone.view dot extend right then you have events meaning this view is handling events which as you as we remember a view should only be a single responsibility principle should only be responsible for displaying the data and that's it the controller should be in charge of handling events and how it should mutate the view or if it needs to update the model so already you know this is going on okay well hey the developers at the time didn't know that that's fine as an ios developer i know this i hate nbc we deal with this all the time actually in ios mvc stands for massive view controller so it's kind of funny how we just kind of throw everything in the controller and that's a real thing if you google it you will find it so now let's talk about amber amber by far is the closest to nbc so you have a model you have the view and it actually uses handlebar js to uh render out its views and so it just means it allows you to put javascript inside of your xml or inside your html any other controller this actually looks really good i don't have anything bad to say i don't have any experience with backbone or amber angular i do but so from what i see it's actually pretty good now we have angular i actually have i before doing react i had done angular for probably like three years i made all my websites i even made a website for a client in angular and i'm looking to you know change that to rio to react but uh so what made angular interesting is that 2a data binding i don't necessarily know backbone and amber had that out the box at least the way that angular did but what it meant is unless you got a text field and you're inputting information and you had a label where it's excuse me you had a you know a p tag you know some text over here you can set up your controller to where whatever you type inside the text field the uh the labor the text on the other side will update that was really cool remember when i first saw that i'm like that is awesome i love angular not really knowing what was gonna happen later on because when you have a simple to-do list that that's oh man that's that's gold once you get to a real life application which we will in a bit you're going to see how that backfires pretty quick so think about angular i know if anyone here has experience with it or for those who don't so this was another thing that i didn't know you know a lot of developers didn't know the problem at the time so this is my to-do right it's uh open brick open bracket my dash to do snake case right well when that's how you use it right and this is the director this is the html this is the component that you're used to seeing and react right it doesn't just so you just have a small bit of html and whenever you call whenever you use you know this html element it's just going to replace it's going to replace this with that sorry i don't know why it took me so long to say but it's just and so now in order for your javascript to know that it exists you need to have a directive and what this tells us what this does javascript program is like hey if you're going to have a file on line five it says it's going to be to do tpl.html federal tpl that was my personal preferences i like to sub uh sub categorize my my uh my files so it knows that it's looking for that file and remember how this is my dash to do well over here on line two it's actually camel case that was one of the worst things in angular that i felt like i always whenever a directive or a component didn't you know show up on the view the very first thing is i probably messed up on my navy because in javascript it needs to be camel case but in html it needs to be snake case that was the worst thing and then what sucked is whenever i would go back to angular i would always forget and i would just be going in through stack overflow then realizing 20 minutes later that like oh i need to do that and then finally you have a controller as you see there is no model it's and there's no models it's just you know views and controllers and at the time i didn't really know what mvc was so i didn't really know supposed to have it but if i was going into angular today i would think to myself where do i store my data there's a huge learning curve i remember that i would fight and get to my angular programs or i felt like weeks until finally things started clicking you start learning things the angular way and then so views there's just a lot of work so of the three or excuse me of the four screens you see here three of them belong to just views you gotta do all this just for review i didn't know that that was a lot of work at the time i just you know i just learned what jquery was uh yeah that was angular so let's do a real world application right so let's just disregard the names just like okay amber backbone and angular right and these were when i say monolithic frameworks what i meant is that these are uh all in one solution for you okay i mean with react reacts very good about like oh if you want to use jquery with react it can work it can work in angular it can work with just regular plain vanilla javascript but with these other frameworks for example with meteor with meteor if you've had a meteor project if you wanted to use something i'm just going to throw a framework under the buster let's say you wanted to use underscore right you needed to find the under the meteor version of underscore you always need you could just throw in any javascript class or any javascript library in with your monolithic framework oh i remember with angular if you had jquery things broke all the time um so real world application right don't worry we're not looking at any code right so let's break down this this example using empty nbc architecture so we're gonna bring it center we have one npc here right so we have the main body then we have another npc here on the sidebar right so that we can handle you know my name here let's say his friends had like parentheses and it said like oh you have 400 friends right so it controlled yeah i had a controller for all this information and a controller for all this information here in the in the main body oh and then also we need a controller for the nav bar too right it's like alright cool like i was able to split up my application into the section and it looks it looks good yeah well okay well now let's let's go and implement some of the code for me to update the text or update the username right there's no models remember that okay when i hit update it updates it here but oh wait oh y'all see the problem uh i need to update it over here in this controller and also in the nav bar but then that breaks our single responsibility principle that we had mentioned earlier like i the controller shouldn't communicate to other controllers it shouldn't communicate up so if let's say we had a parent controller around this this controller should not communicate back to the parent for the parent then to tell the other one like that's already we're in a bad spot we're like okay you know what all right fine i'm just gonna do this one time four hours later you're gonna do it about ten more times and then two months later you're going to be coming across some code you're going to come across a bug like how does this even happen not realizing that you have this thing called side effects that are happening in your code when you update it here all of a sudden you have a side effect on the other side of your application that updates and you're just like i don't know where this book came from so this is this is the problem that you have that you come across with nbc especially in javascript especially with ios so let's rewind real quick during this while you're developing this application and your mvc monolithic framework you're thinking you're like this you're having fun everything's awesome everything's groovy right not really knowing what you were doing is this you're just you just set yourself up to fail so bad like as i did with my angular application that is gasoline now the next scene is when things go up in flames but they didn't have a gift that had all of it so plus i wouldn't put it down i'll say one more time okay so the issue is to go back controllers get bloated because really they're in between the models and the views so by nature we want to just like oh we'll just throw this in this controller not really thinking that like oh it really needs to be somewhere else but wait it needs to either be a model of you or a controller so i kind of don't know where to put this things like oh i need to make a quick api call to you know send up you know analytics or something right as soon as you do that you broke the single responsibility principle you should your controller should only control what uh it is i guess classified so or whatever components it is in charge of but oh also data bindings data binding is bad at least for me every single time someone says like observable to me it kind of like gives me a you know i start getting this pain in the back of my neck when i hear observables it's not a bad word or anything and it's still used very much today there's very valid use cases but i just automatically think about two-way data binding and i just remember you know the headaches that came with that but don't let that discharge you like we'll fame you i followed the diagram like well how come it's not working well the thing is nbc if you remember the photo that you saw earlier that was this top one and if you look at the arrows the way they're communicating is one way right if you look at these other ones these are still mvc patterns as you can kind of see there really is no set standard on how how your application communicates between your models your views and your controllers so for example this view actually observes the model and it communicates back to the controller but then also the controller communicates down to the model which is being observed by the view the controller also updates with what this is what i'm talking about like there is especially when you look at apple's documentation and bring up a model view controller it's just it's an idea that us developers fell in love with not really understanding the repercussions of it because we really don't have a set standard of this is the way you communicate and also when nbc was created uh it was created small talk or with small talks of programming language back in the 70s i believe um back then the things such as the internet didn't exist web browsers like mvc was meant to be you know very small components like i feel when we're developing when uh we're developing out these frameworks or you know when we have this problem we just you know like oh nbc like we have a model future let's just let's just use that i don't i personally don't believe it was meant for its use case today but that is uh that's to be seen so lastly my other issues that i had and this is what react answered for me look at the way the html is like it really does this is invalid html when you see ng repeat if this is a string like framework and framework so that's not valid html at all what this does is this does a loop um so this is a problem that i had uh material over and so when we talk about let's say we talk about react in the next section know that the standard or the best practice was to have your html in a separate file within your javascript having the having html in your javascript was bad you didn't do that if you did that that was rookie so now we're at the clash of the components this is the war that we're in now people prepare yourself i don't care if you're tired all right you need to get up continue moving so clash of the components we got react blue and polymer um i was going to talk about react not just because well hey we're in a you know a react meetup that has nothing to do with the fact that i don't have any experience with blue or polymer either but it's mostly because we're in a react meetup right so with react it was announced in js comp 2013 as you see it's it's underlined if you have not seen this conference or at least the announcement of it i suggest you do so it's like really it's crazy whenever you see the announcement of some of these things it's like when you're out here re-watch the uh announcement of the iphone like it was crazy seeing people's reaction whenever they did the pinch to zoom people lost it they're like oh my god it's amazing right well that was the same thing happened 2013. now it's normal to us but back then it was groundbreaking right so react it discourages mutation uh it renders a dom like a server-side render uh if you remember server-side rendered a rendering as we mentioned right like you hit the server and the server re-renders the entire page well it's kind of similar to that if you think about it right just only running on your client and code becomes more predictable uh since you break everything down in such a way to where okay it's just the view right and we stepped away from the you know so uh one size fit all or you know a solution for all your problems with the whole monolithic era now we're in just the view okay i want to decide how i architect my code and so back in uh the jsconf 2013 this was the actual slide that was used and uh as tom aquino at least how you pronounce his last name tom appino don't worry i said this is gonna be the lyrics like i watched all his talks he's really a very good presenter but really interesting stuff uh so they said that we took a huge step backwards in terms of the main tillage maintainability of our code simply because we were embedding markup inside of our javascript so remember remember that slide i showed you before where the html was separated from the javascript well that was because that's what the standard was for years react completely just you know made everyone rethink the way things were done and they actually had you know people tweeting saying that what the hell is facebook doing like what is this this is bad and then entered redux right or flux right because it discouraged mutation this is actually a uh a functional uh assuming redux was inspired by the elm architecture which is a unidirectional theta flow these are just terms this is jargon terms but it just means that like okay the whole two-way data binding that doesn't exist anymore whenever you mutate something or you change something you make an announcement and this announcement then goes to a reducer and then a reducer goes down to the store and the store updates and then that causes a re-render right the way that the flow is actually going to be the next slide this is a unidirectional flow of data you hear the term called pure function what that means is you never mutate the object that's being you know that's being input into the function you always return a new object so the redux the unidirectional data flow influenced by the l architecture up and go over make sure okay and so when you update things like state this is why react is so scalable right with mvc or you had other previous frameworks you end up having these you'll go really really fast building up right and all of a sudden you reach a plateau and no matter what you have the uh i think it's the someone pregnant what's the it's not the end man or whatever the ghost where like once you add people you actually start slowing down forgot the terms but with this as uh as top of keynote mentioned they actually sped up creating features because code becomes more predictable with react and redox or flux um i'm sure just talk about your function okay so now what's next like what do i think is next i said this is subjective i'm an ios developer for one i actually think something that i learned uh really early on is that history repeats itself no matter what whether it's in programming and human nature history always repeats itself right now we're talking we're going crazy over these you know functional way of programming well that existed a long time ago way before i was born so why are we now making a big deal about it you simply do is we grab something that's already existed and we you know wrap it up and call it something new and we throw you know an electron or a neutron symbol on it it's like boom create a new framework right so let's just think about like okay we just had we went to this utilities framework and went through the mvc uh era then now we're at the view right i personally feel the next thing that's going to go is going to be data not go but i mean what's going to be reinvented is data uh i'm hoping or predicting i don't know uh that we will move away from apis and start moving towards web sockets things because right now the world is all about real time right like i want to get notification i want it now okay apis don't really uh give me that unless i do you know constant polling of me of my api so i feel web sockets is going to be the way right instead of updating user information through an api we're actually going to send it off through a websocket and update it right then it's going to update all your phones uh so that's one thing that i'm assuming we're going to go as far as like who's going to come out winning from the component clash of the components i honestly think it's going to be react not because i'm going to react meet up but because coming from the ios space i know how much how much work goes into just creating an ios app in terms of like there's a reason why phonegap or cordova don't work it's because and why react has become so successful with react native is because react native actually communicates down to the javascript core library and it's a library inside of ios that allows objective-c or swift code to execute javascript and vice versa right so that's how react native in a nutshell works so boo and polymer they've got a long way to go if they're if they have even if they even think they're going to be competing with uh react native in the future right and so i feel that since everything's moving in mobile that for as a developer i imagine in five years now a single javascript developer will be able to create applications for you know of course the web mobile using react native uh actual platforms using your react native or something like electron so that's where i feel that that's going um and so i mentioned like history repeats itself right so with that you see yeah i'll just leave it at that uh so the last thing is topics and people right so the people that i really find influencers people that i like watching talks over when i go on youtube and as like to recommend it if i see tom aquino's name i'm stopping what i'm doing and i'm watching this video really good presenter he's the manager of the react team right pete hunt is also part of the reacting has some really good presentations uh especially during the 2013 2015 uh those presentations were really good because that's whenever you know the world the javascript world was really changing uh to how we know today so brandon he's actually the creator of javascript robert uncle bob martin this guy is amazing he's funny too uh he if you want to know about architecture you're going to learn about things like mbbm mvc mvp talk about things called vipers and ios uh anything like architecture will start like getting you know want to become not only a better developer but really understanding and be able to talk the jargon robert uncle bob martin is your guy john reed he actually comes from an ios background but most of his presentations go over concepts like you know architecture test driven development he is very good and they also talk they all talk about nbc not the negative not the negative like that i did but they explained since they were alive during its creation they explained what its actual intent was uh lastly like douglas crawford he is uh actually just started watching durian while creating this presentation he actually kind of goes hand in hand with brandon he a lot of his talks are on the early days of javascript this is where i learned a lot of the you know the browser wars and you know what equal script how that all kind of transpired topics and like i said i'm going to be posting this on the web for you to you know later later click on or later do research on but the topic is unidirectional data flow architectures in javascript and some must watch videos for all javascript especially react developers are the shooting white i'm sorry this is like of the ugly yellow that's really hard to see but it's going to be the jscon 2013 and that's when react was being announced and also the hacker's way of rethinking web development at facebook this was uh eye-opening i remember whenever i was applying this you know these type of architecture like redux and flux to ios i didn't really understand it i just knew it was what i needed for my team uh so these videos really did help you know help me understand what was going on what's up how we got to where we are today so last stop granted does anyone have any questions\n"