Duration 20:47
16+
Play
Video

Angular Elements Make The Best React Components | Brad McAlister & Ryan Chenkie

Ryan Chenkie
Owner/Developer at Elevate Digital
+ 1 speaker
  • Video
  • Table of contents
  • Video
ng-conf 2019
May 3, 2019, Salt Lake City, UT, USA
ng-conf 2019
Request Q&A
Video
Angular Elements Make The Best React Components | Brad McAlister & Ryan Chenkie
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Add to favorites
5.58 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speakers

Ryan Chenkie
Owner/Developer at Elevate Digital
Brad McAlister
Software Engineering at Sapphire Digital

Brad is currently a Software Engineering Lead at Sapphire Digital. In a past life, he was a systems administrator for 12 years but made the leap into development and regrets NOTHING. Today he finds himself focusing almost 100% on Angular and loves it but secretly dreams about being a full stack dev when he grows up. Twitter: https://twitter.com/sonicparke

View the profile

About the talk

Reusable components are a great idea. That is, until you find yourself working in a React app and you’re unable to reuse the great Angular components you’ve already built. Thankfully, there’s a way around this. If you need to support multiple frontend frameworks, you can harness the power of Angular Elements to do just that and build reusable shared components that will drop right in your app. In this talk, we’ll show you how you can manage components across different frontend frameworks and keep everyone happy.

ng-conf is a three-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. 1500+ developers from across the globe converge on Salt Lake City, UT every year to attend talks and workshops by the Angular team and community experts.

Follow us on twitter https://twitter.com/ngconf

Official Website: https://www.ng-conf.org/

Share

Alright. Hello everyone. Welcome to this talk which might be a little bit controversial. It's about why we think angular elements make the best react components. My name is Ryan shanky I'm a JavaScript developer Consultants. I do a lot of app development for businesses do a little bit of architecture and I am a software engineering lead at a company called Sapphire digital. I am also a JavaScript developer, but I usually spend almost all day long and then do it. So I think if we were to take a look around at the ecosystem is Javascript ecosystem what we might

see is that things are starting to settle a little bit of the big three the red green and blue of JavaScript and Cortez the Killer View and react now course, these aren't the only frame works out there. There's still plenty of relevance and popular Frameworks, but we really need to take the clothes. Like I think things are starting to settle a little bit on the East and one of the problems is I think when we think of the way that companies and developers use these Frameworks we think of it like this. We think that one company might choose angular and that's all that use for all of the the

software that creates that they make a bet on a stick with it and then another react to use that room. That's the only thing that ever make sense review. And you know, they say we're going to stick to you because you liked angularjs different. Yeah in reality. We have a corporation that they've decided Anglers what they're going to do, but then they ended up in purchase someone else. And they have these react. So now we got two things in the mix and then they purchase someone else and then we can all the way

across. What the heck. Thank you. Chief. g-technology All right, what's with these damn? And then we have a team at the same Food Corp in there like we have strong opinions and we want to do something else and then they go through another acquisition. They go through another acquisition then they go through another acquisition and another acquisition a great big mess. So how you deal with that difficult, right? So you might be able to help yourself out by creating a

library where you can share some code between each of these applications. But when we do things that have self-contained behavior and imports and put out it's difficult to share these components between different applications built on different Frameworks. What if we have what if we can have what would be sort of a custom element write something that looks just like a native HTML elements and something that we could give a custom name to Dropping anywhere. What if that's a cup of

milk element can have sort of a private Dom around it. So that scripting and styling doesn't bleed out to the overall application. And then what if we could share these components between any application regardless of the Frameworks regardless of what is built on could even be a static HTML page and there is a standard what you may have heard of that what we can do is have something of a custom elements. We use the custom element API and we can give it a name anything. We want swear looks like a native HTML element and because the custom

element API extends from the browsers HTML element, it has some predictable Behavior, so it's not really custom-made thing that's going to be dicey weather. It works and turn browsers. It is predictable Behavior. So doing this, you know, we've got we got the situation where things aren't super well-supported everywhere. You know, we've got Evergreen browsers, but The Usual Suspects are they there be behind, you know, it's getting better. And what we're seeing is that can really help us out to fill the gaps. Sounds pretty good, right? What are people saying about web

components? Well, it turns out not everybody is convinced that they're the best thing in the world. Some people figure maybe they're not ready. Maybe it's not a great idea to go for these things. And I think there's good reason for that because in reality nothing is ever going to be a component. Do you want to create a react component the best place to do that is in reacts and consumed it reacts same goes for angular any other framework nothing beats a component in its native habitat, but if you do have a Jimmy need to share components between different

Technologies, then I think what components make a compelling case for more we'd like to say we'd like to contend We'd like to contends that angular elements are going to give you the best experience to do that. So if you do want to create web components, there's nothing that can really beat when I get home and there's a few reasons for this is that we're going to get the best kind of documentation and support. Developer experience is really good with angular elements. We get the angler apis, we all know and love the tooling. We know for the CLI, we get great

documentation and contents and best overall supports largely via the angular Community College in an Ideal World with us where NASA loves angular. So that's Works in a lot of projects and one of these projects is the International Space Station or the ISS. And on the ISS. There is a lot of critical equipment but one of those piece of equipment is this thing the discombobulator and they want to monitor the temperature of this discombobulator because if it gets too high bad things can happen if you do not want bad things happening

in space. Let's look. So what they did is they have an angular app since he loves Angela and it is their dashboard for their Ground Control and they have this temperature gauge in there any would ask for just an angular component and it monitors the temperature in the discombobulator. So let's look at it take a look at a demo. Were there all right, but Ryan, can you please start the temperature updates and 1/4 * 2? Fix thread you can see we're getting an input pretty much from fire base. gay Firebase

Cyrus Wrecking Ball, right and it's changing the temperature variable temperature and it's picking it up through an input and just shown is the temperature in Ryan's going to fire the high temp alert what happens if this is an output on the component, but then sends a emits an event through the output to the angular app, which then displays that warning high temperature reported for the just about to later and that's how it works. All right slides back to the slide we go. All right. Now this is the American space station right or the

SS for short. No, it is the International Space Station the ISS. And since it is the International Space Station, there are lots of other space agencies and lots of other countries that also have a vested interest and want to monitor the temperature of the discombobulator, but they want to know why do we really have to write something else? You've already got it working NASA. Can you just give it to us? And the problem is these other agencies don't use angular. They use maybe react or do you or a geocities site for all we know

each other and they came up with what they think is the best solution which is a web component built with angular elements. So, let's see how that happens. So we're going to take our angular component or temperature gauge. We're going to turn it into an egg, which is a lot like this. Just leave this here for a minute. This is good. All right, but we're not going to do it because hashtag not Cara. Thank you for remember that so the first step is to add angular elements and we simply do that with NG add at angular elements. And the next thing we

do is since we have an angular component turning it into an element. It's not really the same as an angular app anymore. So we have to actually manually bootstrap this angular components in a in the app module using ND to bootstrap. We do first create a custom element. Where we pass our temperature gauge to put it in and the injector, so we still have dependency injection. And then we use the custom elements API of the browser that was earlier to define the elements so that it knows what he's doing and since it's all Dynamic we need to

Add it to the entry components. So angular knows that it needs to look for this when it comes up now. It's talking to Rob or mold in a lot of this stuff is going to get a lot simpler in the future not here yet, but it's supposed to get some texts. So cuz we don't care about the whole dashboard anymore. We just care about that one component in right now before it gets simpler. As Rob was saying we need to replace the apple with our temperature gauge components. We just do that. We get rid of fruit with the temperature gauge component in there and we have the relevant inputs in

our case NASA. It's Fahrenheit and turn it up just to bug you later. All right, and then we do NG search cuz we want to see how it works. Right so we do that you serve. And then we can hear. Build to construct HTML HTML element, please use the new operator what this means is polyfills. We need hollifield because not every browser as we still have support or even partial support for it. We do this by installing this great web components custom elements poly Tails, if you uninstall and then we add to polyfills to are probably feels TS file another good and then it'll

work. Let's take a look at my right. So heading over to the demo that right cuz I kept you updating. It is updating and this is the same component but it has been angular element eyes are running in angular app and we have our high temp alert. But if you'll notice even though the output the event was admitted through the out but we didn't handle it. So nothing really happened other than in that little component. So that we have this component ready to go. We still need to distribute it and that's kind of something that's not often talked about we get like hey, make an element or make

something here and then hey use it over here, but we never connects the pieces on how to get there. So that's what this is for so distribution. We think the best way is using ngx Bill plus and if he upped and we'll go through this real quick cuz it's out there. But first we just need to add ndx Bill plus which simply updates the Builder and then we have the single bundle and keep polyfills next. And those two flags are going to drop rod script fixed and then we'll run this

build script and then we get well more files for 3 that we care about main JS, which is basically are component file all the code for a component polyfills JS which is all the polyfills taken in the Imports and everything put in he can't made it into Politoed in scriptures, which is the court English them and those other three that we care about but we we have are built thing but we still need a package it and get it out there. So we need a package Json file that we're going to drop in or just folder. But if you leave

it in your just told her next time you build it's going to get overwritten. So I like to put in the assets folder. Just give it a name and a version numbers simple as that you can add more stuff on one side to Middle School District We just run empty and pack and we end up with next we end up with a tgz file, which is our package elements package web component ready to publish. Alright, so now let's watch this thing up and react and see how that's going to work a little bit of a funny accent for me with

words like JavaScript so far. That's because I come from a little country to the north called Canada and my favorite space agency is the Canadian space agency. Have you never heard? I'm not surprised the Canadian space agency has given us all sorts of really close to us astronauts like Chris Hadfield who maybe you've seen on Twitter and he shared a lot of his journey in Space. The CSA has given us things like the robotic arm that sits on the International Space Station and moves car dealerships in to bring in fresh cargo here

at this conference conference in the states, which is largely International. I know but probably mostly Americans here, right and I understand some of the stereotypes Canadians things like how were always so polite. We're always saying sorry and we're always you know, super cordial but you know, that's not always how it is. In fact, you could say that Canadians are kind of like to Americans like reactive Oliver's are too angular developers. We're always judging you. There's no way that the slides give them the punchline did it it did.

Anyway, you no idea world the Canadian space agency wants to use react for their mission control and they don't want to have to go rebuild the same components that's already built to tell the temperature when I just reuse I can put it simply because we have this as an angular elements we can make use of it and react so by the temperature gauge that we're going to do and then we just drop it in ISS temperature gauge right into the application. We can pass them in the end. It's going to work out of the box to Canada instead of Fahrenheit. How did I leave

relevant in the future different units up north? And so what we're going to get here so we can pass these inputs. There's something to know here though is when you go to pass inputs. Is element in react it's going to be a cute little bit differently. You can't pass an object in kind of like you would if you were finding in an angular application. It's just going to serialize whatever you pass into a string. So there's next to do if you want to operate on an object. But anyway, where we going to get next is is the need to listen for events coming from the component. And so I

might be tempted to do something like this where we have an event finding high temperature event when that is triggered maybe run some method to operate on it. We can't do this thing. There's some special work that we've got to do in react instead and what we got to do in particular as we got to set up this ref this reference on the elements and this is a reaction where you can reference a Dom node and then you can you can operate on it. However, you like and so what we'll do is we'll set up in safe way to staple components will set up his local member ISS temp component and don't have

his methods to handle the reference to that note know it's going to do is point is local member. ITube to that note eventually. So then what we can do is pass in the handle wrap method to rest. Alright, so how do we actually get information out of the elements? Well in the component did Mount life cycle hook? For example, we can add an event listener. So our element is going to admit something called high temp and we can take the events do whatever we want with it and react you can set some states whatever we want really and then we'd want to clean up when the component is unmounted weed

wants you remove the event listener to prevent memory leaks and everything. So we can listen for the events and it's not just the fact there's an event being admitted that we can tap into its information its details from the event emitted by angular we can get the alert status we can get the name temperature and set that outside of the element itself demo now. Marriott self CSA Mission Control we've got our units in Celsius. This is the same angular elements that we've been seeing before and Brad's going to

trigger high temp now and we've got our high temperature warning. So crucial point to note here. Is that everything right here that you see is angular, but it's the information being emitted from it isn't used to do other things in the consuming application so we can drop it right in and then we can act on information coming out of it. All right. Because this is what you found. Its of course, we are not limited to just angular and react so we can use it anywhere. So if Russia uses you for their mission control, they can share the same component now, I'm pretty enticing but

is this a good idea what you think yes or no? I think it is a good idea and what size of bangle sizes and issues and it's just not there yet and Ivy will help this but I'm not sure exactly how much do Mannford showed us some but it's not all the way there yet in this is why cuz ideas on here and a big deal is if you need to do content projection or anything that requires anything you have to do it one time. It might not be good for you reasons why I might be a

good idea. If you're upgrading from angularjs to angular, then you can build your components in angular turn them into web components drop them back in angularjs and do a piecemeal upgrade and it'll work great Sam knows a lot about how to upgrade weather. That's the path or not. We all have well, I'm assuming we don't have framework experience Enfamil you already so that's a good reason and Ivy is coming and that is also a good reason and I was talking to Rob and there's a lot of things happening down the path on the road map where it's going to make this actually a really good idea. So while

it's still kind of early it's still a really good idea. All right, that's about all we have. We like to give a special thanks to people Yuri and Manfred who have some great content out there year. He's got a great course on Egghead. I always give me a clap. Yeah. Here's got a great course on a cat. IO it encouraged you to check that out in men Fred's got some content online some written content that is very good and in-depth as well. So check those out and in the links for all that we've done here including the Repose. If you want to check those out

everything is at this bit, ly link and ged.com 2 - elements and that's just about all we have for next one. We are here on Twitter that Ranch at Sonic Park everyone not to buy $30 slide advancers if you can help me, please. Thank you so much and have a great rest of your conference text.

Cackle comments for the website

Buy this talk

Access to the talk “Angular Elements Make The Best React Components | Brad McAlister & Ryan Chenkie”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free

Access to all the recordings of the event

Get access to all videos “ng-conf 2019”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “IT & Technology”?

You might be interested in videos from this event

September 28, 2018
Moscow
16
177
app store, apps, development, google play, mobile, soft

Similar talks

Manfred Steyer
Trainer, Berater, Fachautor at Selbstständig
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Misko Hevery
Computer Scientist at Google
+ 1 speaker
Stephen Fluin
Developer Advocate at Google
+ 1 speaker
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Rob Wormald
Developer Programs Engineer at Google
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk “Angular Elements Make The Best React Components | Brad McAlister & Ryan Chenkie”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
731 conferences
30008 speakers
11213 hours of content
Ryan Chenkie
Brad McAlister