The Story of Web Components

Поделиться
HTML-код
  • Опубликовано: 23 ноя 2024

Комментарии • 294

  • @nickfotopoulos5323
    @nickfotopoulos5323 2 года назад +137

    "Flash [...] Created by Adobe..."
    Abobe ACQUIRED Flash and but didn't contribute very much at all feature wise to it. Those accoladed belong to Jonathan Gay of FutureWave Software.
    FutureWave created SmartSketch. When AT&T aquired the hardware that it ran on, the software no longer had a platform so Jonathan Gay retooled SmartSketch to be an application that could output animated content that could be played in any web browser and called it FutureSplash Animator. FutureWave pitched the product to Abode but they apparently were not impressed enough to reach an agreement. Not long after Macromedia acquired FutureWave and their technology and the product would go on to be branded Macromedia Flash and Jonathan Gay would eventually become the CTO of Macromedia in 2004. The very next year in 2005 Adobe aquired Macromedia for 3.4 billion dollars as a means of getting the Flash product, and it became Adobe Flash.

    • @uidotdev
      @uidotdev  2 года назад +17

      Feels a little pedantic but 👍

    • @blu3_enjoy
      @blu3_enjoy 2 года назад +15

      Nice comment.. Not just interesting events, but very important to give context to the evolution of the Web with real facts. The video maker needs to get his priorities straight. Titling videos on unsettled matters in such authoritative terms and not even having the history nailed down, shaking my head.

    • @pocolashon
      @pocolashon 2 года назад +8

      Thanks for this! I was gonna bitch about it myself so you saved me a few minutes.

    • @uidotdev
      @uidotdev  2 года назад +1

      @@blu3_enjoy lol

    • @dhkatz_
      @dhkatz_ 2 года назад +1

      Bro, nobody cares. Most people know Flash from Adobe, so that's what's relevant to get the mind to recall what Flash is.

  • @slava_trushkin
    @slava_trushkin 2 года назад +86

    I think web components do have their uses and might become more popular.
    Just few years ago big issue was browser support that prevented web components adaptation. One big issue was Edge, which until the end did not support shadow DOM. Browser adaptation takes time, so for several years after Microsoft switched to Chromium there were enough users still using old Edge, that polyfills (which were good, but had their own issues) were required to run web components in productions. Now it is finally not an issue.
    Then issue was complexity of developing web components. Today it is also not an issue with many frameworks adding support for generating web components. Svelte, Vue 3, Lit all can generate reusable web components.
    As for uses, one use case is dealing with server side rendering. SSR is becoming more popular, but often data needs to be rendered only in browser, such as components that fetch data from APIs or show user specific data. When such components are used in big app, hydrating them could become a nightmare, especially if its a reusable third party component that is meant to work with all frameworks, but if logic is split in reusable web component, framework doesn't need to worry about hydration.

    • @uidotdev
      @uidotdev  2 года назад +8

      Great comment. Thank you!

    • @TayambaMwanza
      @TayambaMwanza 2 года назад +4

      For me it was SSR, because that helps a lot with SEO, I always wondered why ionic didn't support ssr properly and now I know it's due to web components.

  • @nChauhan91
    @nChauhan91 2 года назад +68

    I have been working on web components for last 6-8 months now using LIT, i think they are great for simple re-usable peices of an app but it's true that they have a long way to go before they can be considered as a replacement for the current frameworks

    • @uidotdev
      @uidotdev  2 года назад +1

      Yeah we purposefully left out LIT and anything regarding WC in the future.

    • @nChauhan91
      @nChauhan91 2 года назад +9

      @@uidotdev sure, it makes sense as the video was focused on the core technology of WCs & it's true they are very hard (comparatively) to learn on their own
      They should make it simpler, i was able to learn LIT relatively easily because it looked very similar to class based components from other frameworks. But using a library feels like doing the same thing which WC were created to avoid 😃

    • @uidotdev
      @uidotdev  2 года назад +3

      @@nChauhan91 Agree!

    • @tardo1234
      @tardo1234 2 года назад

      @@nChauhan91 sometimes with lit and stencil it might be even worse. It might seem like there are two layers of abstraction instead of one with other frameworks. For me it is worth it cause we deliver our design system to all kind of stacks but for smaller companies with smaller teams and fewer stacks... not sure.

    • @DocBrown101
      @DocBrown101 2 года назад +4

      We are also since a few months in the process of rewriting our project on lit web components.

  • @MaxArt2501
    @MaxArt2501 2 года назад +76

    I think this video has quite some misconceptions.
    Web Components weren't never meant to replace frameworks or data-flow control libraries. They weren't event meant to replace templating and styling libraries. And this is from the get go.
    They, on the other hand, were meant to offer the basic bricks to create framework-agnostic, reusable, accessible elements. And they _do_ deliver this.
    Now, yes, of course developing "vanilla" web components is cumbersome - but the counterpart isn't using React, but rather basic DOM methods like document.createElement and .appendChild.
    Keep in mind that the concept of Web Components was born before React and hasn't changed, so the comparison with that is out of place. I repeat, they weren't meant to replace React, or Angular or whatever. In fact, they _work quite well_ with them (well, not particularly well with React, but that's React's fault).
    I think the best fit for Web Components at the moment is using them for UI kits (libraries of small, reusable components), but creating fully-fledged applications with them is already possible, although some libraries still need to be refined and there's definitely a much smaller community around at the moment.
    Personally I think the problems with Web Components adoption can be sum up with these points (one or more could be true for every case):
    - lack of support for Declarative Shadow DOM (no server-side rendering);
    - lack of support for Form-Associated Custom Elements (FACEs) (Firefox recently shipped a part of the spec);
    - the simple fact that if you're using Framework X and you already did everything in Framework X, you aren't compelled to use another technology to do something equivalent.
    The last point, on the other hand, brings the problem of framework lock-in, meaning that it's always hard to migrate from Framework X if for some reason you're forced to do so. In the end, relying so heavely on Framework X increases the team's technical debt.
    The good news is that Web Components - being framework-agnostic - actually _help_ migrating from frameworks. They also are great as foundational elements if you need to work with different third-party teams.
    I agree that the adoption has been slow and could have been faster (also because other vendors didn't share Google's sentiment and commitment about them), but they _are_ gaining traction, no doubt about it.

    • @DannyEngelman
      @DannyEngelman 2 года назад +4

      Don't tell anyone but all Browser developers have implemented complex HTML5 tags *with* Web Components technology, here on RUclips you can see (set Show user agent shadow DOM in F12 settings) every tag has a shadowRoot and shadowDOM content you can't change. Some applies to and and a lot more. So only if your site has plain HTML tags, you *do not* use Web Components.

    • @uidotdev
      @uidotdev  2 года назад +7

      twitter.com/slightlylate/status/769684151091892224 🤷

    • @MaxArt2501
      @MaxArt2501 2 года назад +23

      @@uidotdev That doesn't mean what you think it means. It says to end framework _wars_, not to end the _frameworks_.
      The goal here is to create interoperable components, not components that could work only with Framework X. One of the expected results was the ability to wrap components for Framework X in Web Components in order to use them with Framework Y.

    • @steamer2k319
      @steamer2k319 2 года назад +4

      Our company is starting to work with Web Components. I haven't been super hands-on with them myself but adoption is up by at least one data point 😁.
      I think the video is missing a significant piece, though: that frameworks like React also haven't coordinated state changes between components well*. This is why there are state management libraries. The existence of Redux, Mobx, Vuex, Riverpod, etc. don't invalidate the usefulness of React, Vue or Flutter--they just indicate that state management is a tangential concern.
      When working among a large team of developers, encapsulation is a useful concept /architecural-feature. Most changes should happen locally so that sub-teams can work independently. But then there remain boundary cases where multiple sub-teams need to be able to coordinate and agree on the interface their systems use to interact. Components + State Management, taken together, fulfill both sides of the divide-and-conquer approach to complex projects.
      * Arguably the advent of Context and Hooks addresses this somewhat but they arrived late relative to the popularity of React.

    • @TwoLeggedTriceratops
      @TwoLeggedTriceratops 2 года назад +9

      Very well stated. Frameworks and libraries come and go - the average is about 10 years for popular framework adoption to start waning. We have tools like StencilJS and LitElement in the meanwhile to help keep our core components as framework agnostic as possible. The next framework will probably treat Web Components with more respect now that support has gotten better and the tech has matured. Always bet on the web.

  • @donniedamato
    @donniedamato 2 года назад +20

    I write low-level web components all the time. I find them easier to understand because I've been working with the DOM for so many years. Trying to get an input to focus after a user event is easy using the DOM, not easy in React for example. It's also really nice that I don't need to have a framework running to support the component; the browser just needs the component code. I'm looking forward to declarative shadow DOM to support SSR better for custom elements which don't have JS logic (used for layouts).

    • @ryanz7667
      @ryanz7667 2 года назад +1

      I think there’s a lot going on with familiarity there, focusing and element after an event is extremely easy in react. You just set const ref = useRef(), set the ref on the element (same as setting an id) and then ref.current.focus() in your event handler.

    • @donniedamato
      @donniedamato 2 года назад +3

      @@ryanz7667 Doesn't work if the component re-renders due to the user event. You'd have to add a useEffect to apply the focus and potentially a useState to determine if the focus should occur.

    • @billy818
      @billy818 9 месяцев назад

      yeah, ssr + web components feels like a breath of fresh air.
      some people create a hell with their react framework framework frameworks

  • @lemontec
    @lemontec 11 месяцев назад +2

    seems like if you want the web to move forward you need a big tech company who dog feeds the tech into their own projects. Apple early on pushed html5 before the appstore existed and they added css animations to make their product pages more interactive. Facebook and Google of course invented React and Angular to solve their own app UI problems. In comparison, web components felt like an academic undertaking coming out of a standard body.

  • @nilfux
    @nilfux 2 года назад +35

    Stencil is brilliant. It cooperates with any existing library/framework or standalone. Web components still can work. Our use case was a company wide set of components that needed to work inside React, Angular and Wordpress.

    • @uidotdev
      @uidotdev  2 года назад +1

      Yeah Stencil is rad. Thanks for watching!

    • @TerriTerriHotSauce
      @TerriTerriHotSauce 2 года назад +3

      @@uidotdev Story of Stencil please 😅

    • @BosonCollider
      @BosonCollider Год назад

      Does it do anything that Svelte doesn't?

  • @niorad
    @niorad 2 года назад +7

    For me one the biggest downside of WC-as-react-alternative is the lack of tooling (nothing like Jest/Enzyme, lack of SSR). But as some here already mentioned, it was never meant for architecting entire apps. On the day to day it's not terrible, though. (Working on WC-Projects since 2020)

  • @DannyEngelman
    @DannyEngelman 2 года назад +3

    While viewing this video, which only goes into V0, I inspected the tag in DEVTools. WTF? It says the tag has a #shadow-root (user-agent) and contains a whole bunch of tags I can **not** touch. So Web Components suck, but all more complex HTML5 elements are built with Web Components. Better not ever use an again if you don't want to use Web Components.

  • @kevinbatdorf
    @kevinbatdorf 2 года назад +14

    So maybe we got the alien timeline but didn’t know it. That explains a lot actually.

    • @uidotdev
      @uidotdev  2 года назад +1

      🤔 you may be onto something

    • @motherindiafathersurf1568
      @motherindiafathersurf1568 2 года назад

      same here.

    • @motherindiafathersurf1568
      @motherindiafathersurf1568 2 года назад

      and absolutely hated react or angular, happy to have dropped those 5 years back, my code is neat, clean, short and state management super simple !

    • @ShadoFXPerino
      @ShadoFXPerino 2 года назад

      Web components are fine in all the ways that don't matter... to devs who prefer convenience over all else, which it turns out is most of the devs outside Google and Firefox. We collectively deserve the timeline we live in.

  • @kamalsahoo4146
    @kamalsahoo4146 2 года назад +8

    I have recently tried Microsoft Fast which is a web component framework. I feel like it is great for developing display components when you couple the UI web components with other framework like react for state management it really shows it benifits.

    • @uidotdev
      @uidotdev  2 года назад

      We'll check it out. Thanks for watching!

  • @rahulgawale
    @rahulgawale 2 года назад +6

    Salesforce uses web components massively. They have their extended version called lightning web components. I love it. Its simple and faster to build.

    • @tommy516
      @tommy516 2 года назад +4

      Agreed, the mere fact that this video claims communication is not handled well tells me the author has little to no experience with them. You can’t get more simple than passing data through properties and standard events….

    • @rahulgawale
      @rahulgawale 2 года назад

      @@tommy516 correct

    • @AnthonyBullard
      @AnthonyBullard 2 года назад +1

      ServiceNow uses the same for their Next UI platform. It's all web components

  • @Weeksmistro
    @Weeksmistro 2 года назад +5

    Dude, at 5:04, more than half of that code can be replace with an html template.

    • @garretmh
      @garretmh 5 месяцев назад

      …which would still need to be hydrated

  • @fulgren0965
    @fulgren0965 2 года назад +132

    I once interviewed at a heavy Web Components using company, without knowing too much about this tech. The questions they asked made a lot more sense in context after watching this video. I didn't get in, and now it feels like I dodged a bullet.

    • @uidotdev
      @uidotdev  2 года назад +5

      😂 Glad it was helpful!

  • @TrevorOFarrell
    @TrevorOFarrell 2 года назад +4

    Best webdev channel on youtube I've seen so far, keep it up!

    • @uidotdev
      @uidotdev  2 года назад +1

      Thank you! That means a lot.

  • @ploosqva
    @ploosqva 2 года назад +4

    The spec is low level, like assembler to high level languages
    Then again, if "61 ways to build web components" is not an indicator for their success then I don't know what is. Look up "all the ways to make a web component" article
    So many ways to create web components and they all work together seamlessly and transparently. React does not even come close. It's a closed environment

  • @death-disco
    @death-disco 2 года назад +3

    This video was made too eagerly, web components are amazing especially if you’re working on web assembly or any kind of native wrapper framework. They’re absolutely the future,unless we move post-browser somehow.

    • @uidotdev
      @uidotdev  2 года назад +4

      The first clip we showed was over a decade ago. If it's still "too early", I'm not sure when would be appropriate.

  • @grinsk3ks
    @grinsk3ks 2 года назад +8

    Can't agree. I think custom elements gained a lot of traction in the last year. You can build them with vue, svelte and the amazing lit library. I love them for traditional ssr projects. E.g. Drupal.
    They allow easy interactivity and decoupling of FE from BE

    • @uidotdev
      @uidotdev  2 года назад

      Thanks for watching!

    • @eduardoalvarez2497
      @eduardoalvarez2497 2 года назад

      You just answer yourself when you said "You can build them with vue".

    • @Dxpress_
      @Dxpress_ 2 года назад

      This video is talking about "Web Components", as in the proposed standard of bringing native component functionality to HTML outside of JS frameworks like Vue/Svelte/etc.
      It's not talking about "web components", as in writing custom elements.
      Writing custom elements is great, but there's no real way to do that outside of using JS frameworks. It would be nice to do that just by writing native HTML.
      The "Web Components" standard discussed in this video touched on how the proposal for that never really took off.

  • @Azurryu
    @Azurryu Год назад

    Web compoments are extremely useful for scoping styles where you have no control over the web page your component gets used in. I can't throw in react or anything else, friendly s technically achieve the same with their own drawbacks (resizing to fit the content) - but a native web component perfectly enables us to offer our customers what they need: components that don't conflict with their page and are developed by a third party with no access to their CMS or their code. We can pretty much distribute it similar to ads - but this tag where you want this component to render and our scripts handles the rest for you without conflicting with your page.

  • @wick12298
    @wick12298 Год назад +1

    Damn this is the history version of 100 seconds of Web Components, You are so under-rated mate!

  • @Infinighost
    @Infinighost 2 года назад +96

    "Do templates have to live inside the application logic? If so, this is a really poor decision" 10 years ago, everything was so MVC and I absolutely hated it. I just never felt that such an extreme separation was necessary unless you had different teams/members managing each part. I'm on a dev team of two, and it is much easier and faster to avoid those artificial separations.

    • @uidotdev
      @uidotdev  2 года назад +10

      100%

    • @nilfux
      @nilfux 2 года назад +7

      The key to all these disagreements is that the underlying language is pure dogshit to begin with. So there's no truly right answers.

    • @TimL_
      @TimL_ 2 года назад +4

      It's a trade-off between structure - maintainability on the one hand, and ease and speed of development on the other. For small teams it might be advantageous to prefer the latter, but that decision is poor for a large-scale project.

    • @uidotdev
      @uidotdev  2 года назад +6

      @@TimL_ I know of a lot of large teams that are doing just fine with that decision.

    • @ts47920535
      @ts47920535 2 года назад +19

      99% of the case, separating Logic and Layout (as much as possible) is the correct way to go.
      You even do that in React when you abstract most of the logic to some hook or component abstraction, and the UI to its own component. SOME overlap is good.
      If you don't do that, you get those trainee-level 3000 line class components that are impossible to debug or add features to.
      So "being a nazi" about MVC separation is usually rooted in having to debug that type of bundled-together code in the past.

  • @Dev-Siri
    @Dev-Siri Год назад +2

    No more uploads?
    Did you die with the web components?

  • @FinnReinhardt
    @FinnReinhardt 2 года назад +3

    Don't have time to watch it yet, but I'll save this video for later and help out with the algorithm meanwhile 🔥

    • @uidotdev
      @uidotdev  2 года назад

      ❤️❤️❤️❤️

  • @brendanfarquharson1874
    @brendanfarquharson1874 2 года назад +2

    Vanilla Web components can be nice and powerful. Any complex logic can be imported with a bundler.
    Lit and stencil are great for event binding, which is a pain point with vanilla custom elements.

    • @uidotdev
      @uidotdev  2 года назад +2

      We purposefully didn't talk about either of those and kept it more on the history. But yes, those are doing great.

  • @BringOutTheBeat
    @BringOutTheBeat 2 года назад +3

    Very informative video, thanks!

    • @uidotdev
      @uidotdev  2 года назад

      So glad it was helpful!

  • @liquidsnake6879
    @liquidsnake6879 Год назад +1

    A world that no longer existed? Webcomponents are just beginning to be widely adopted, if anything i think it was way ahead of its time, and yeah perhaps the implementation was too complex and most people didn't see the point in it at the time. People cared more about making SPAs quickly which is what you get with something like React.
    Webcomponents were never really meant to replace frameworks, they were meant to provide a building block that others might later use to build frameworks on top of, that's what Google did, that's what Stencil does and that's what Vue and Svelte do with their custom-element wrappers. Comparing webcomponents to React is an unfair comparison, a more fair comparison would be comparing the difficulty of setting up webcomponents to setting up native reactivity using Proxies alongside your own virtual dom.
    If you're building your own webcomponents from scratch and complaining it's difficult to build stuff that way you might also want to try doing reactive SPAs using only native APIs and see how hard THAT is lol

  • @This-Is-The-End
    @This-Is-The-End 7 месяцев назад +1

    One year later: Web components are everywhere! 🤣🤣😂😂

  • @huxnwebdev
    @huxnwebdev 2 года назад +4

    GOAT here 💛

    • @uidotdev
      @uidotdev  2 года назад +1

      Appreciate you! ❤️

  • @ChaosBlader
    @ChaosBlader 2 года назад +5

    I really feel like there was some whitewashing of Flash at the opening (maybe purposefully at the expense of Apple). Steve Jobs was right - Flash was horrible. Fundamentally, it was existential threat to all mobile computing; (1) its was riddled with security holes, (2) it was massively inefficient and drained the battery of mobile devices (3) Adobe had no interest in supporting the touch inputs that Apple spent billions in creating that the entire mobile platforms use today. The HTML5 transition was inevitable was mobile became mainstream. Adobe tried and gave up in getting it working on ARM.
    We know today, as a result of the Apple vs Epic lawsuit, that Steve Jobs wasn't being petty. Apple paid and worked with Adobe engineers to port Flash to the iPhone and iPad. After months of work the performance was awful; and only until after they tried did Steve Jobs fully reject Flash

    • @uidotdev
      @uidotdev  2 года назад +1

      Hard to be nuanced with subtopics in videos like this. Appreciate your comment though.

  • @tardo1234
    @tardo1234 2 года назад +16

    As a design system dev I am pretty conflicted about WC. I use Stencil to output the design system in WC and also as an Angular wrapper. The fact that Stencil has to compile framework specific wrappers pretty much shows that web components are in a weird state where they don't play along nicely with others but rather even compete with the frameworks. I don't know, it is just weird to think sometimes.

    • @uidotdev
      @uidotdev  2 года назад +1

      100%. I still dig the vision, just needs better execution. We tried to be objective about that in the video.

    • @tokyokps
      @tokyokps 2 года назад +8

      It's not that Web Components don't play nicely with frameworks -- it's that (some/most) frameworks haven't prioritized making the experience of using with Web Components as nice as their proprietary components, despite the fact that Web Components have been part of the web platform for years now.
      But to be specific, other than React's refusal to acknowledge the existence of custom DOM events, and in general the poor support for type-checking custom elements in proprietary templating languages, Custom Elements are otherwise very usable without any wrappers in most frameworks (google custom-elements-everywhere for stats).
      So the wrappers are really just to close the DX gap that (so far) most frameworks haven't prioritized. And it's not because they can't or that it's somehow intractably hard, it's that they'd rather just focus on their proprietary model, standards be damned. I imagine they don't see a benefit to _their framework's adoption_ to allow commodity components to more freely move in/out/between frameworks; they'd just rather you rewrite all of these components in their framework once you decide their shiny ball is the next one to move to. It's the definition of optimizing for a local maxima -- my framework vs. your framework, zero sum. If frameworks would instead really prioritize first-class support for using the platform-standard component model (at least as an option, if not as the basis), think how much reuse could happen as component sets become stable and hardened and portable wherever the winds of front-end development take us after React/Angular/Vue fade into something new.
      In short, Web Components are a perfect interface for a coopera-tition model of framework evolution: interoperability at the component boundaries, innovation on the implementation details. Unfortunately, that common good has yet to be acknowledged by the existing framework juggernauts.
      So don't aim that disappointment at WC, aim it at the frameworks to do better.

    • @MaxArt2501
      @MaxArt2501 2 года назад +1

      There's absolutely no need to wrap Web Components for Angular, as it plays quite nicely with them. What Stencil does is handy but not really necessary. You can use Web Components in Angular as they are.

  • @umer-media
    @umer-media 2 года назад +1

    Hey Tyler. Do you have plans do update your react course?. It was almost 2 years since it last updated. If so when will be expected release date. Thanks

    • @uidotdev
      @uidotdev  2 года назад

      Yes, but not release date right now.

  • @Protoklatos
    @Protoklatos 7 месяцев назад

    I'd love to hear what you think about Shoelace, Font Awesome, and upcoming Web Awesome in relationship to Web Components now!

  • @davidmaxwaterman
    @davidmaxwaterman 2 года назад +1

    I've used web components since 2014 and haven't ever found the need for any javascript frameworks. The only need for things like React, Vue, or Angular, is in getting a job, because so many companies find themselves locked in they insist on existing experience with those frameworks.

    • @uidotdev
      @uidotdev  2 года назад +2

      "the only need is in getting a job" - that's... literally the biggest need people have.

  • @OliverSalzburg
    @OliverSalzburg 2 года назад +8

    If you look at any tech on the web right now and feel like that is a "win", you're lost. Everyone is a loser in that space. Being able to write tool-less and dependency-free components trivially would be a godsend. We're now closer than ever and until we're there, we've migrated from React v47 to Angular v21 just to be able to finally resolve all the issues with the build tooling or testing or whatever.

    • @uidotdev
      @uidotdev  2 года назад +2

      "Everyone is a loser" 🤝

    • @zactron1997
      @zactron1997 2 года назад +2

      I find it a joke that most web development starts with "Ok install NPM- no no the right version of NPM...ok now install this one lightweight super easy 1.5GB javascript framework that'll be abandoned in 5 years after having its core syntax change 8 times...ok now you can type hello world in 2 lines of code!"

  • @omedjamal1056
    @omedjamal1056 2 года назад +4

    thanks for this great video.

    • @uidotdev
      @uidotdev  2 года назад +1

      Glad you enjoyed it!

  • @DaLeR080
    @DaLeR080 2 года назад +4

    Amazing video, thanks!

  • @moodynoob
    @moodynoob 2 года назад

    My former enterprise company used web components - but they had a custom framework for managing them. Every team in the massive org would use WC + React for building different parts of the massive website, and it worked well given each team were effectively a silo.
    Beyond publishing documentation of the data and events that went in and out of the component, it allowed teams to independently maintain their products without stepping on each other's toes too much. The downside is everyone was locked onto using React and the custom web component framework. If you wanted to use SSR or Vite instead of Webpack, you couldn't.
    In the new company I moved to, they tackled this problem by moving to Webpack's Module Federation the moment it got released. MF apparently can work with SSR. Unfortunately I moved out before I could see it in practice.

    • @uidotdev
      @uidotdev  2 года назад

      Thanks for the great comment. What was the value in using both WC and React? I've always felt like at that point, why not just have everything in React?

  • @axMf3qTI
    @axMf3qTI 2 года назад +8

    Lit is pretty great tho.

    • @uidotdev
      @uidotdev  2 года назад +1

      Yeah we purposefully left out LIT and instead focused on the history.

    • @cdslxc
      @cdslxc Год назад

      no 😢

  • @katlehokomeke
    @katlehokomeke 2 года назад

    Stencil js helps overcome all those problems.I love it. It integrates well with capacitor as well.

    • @uidotdev
      @uidotdev  2 года назад

      Yeah Stencil is great.

  • @SpaghettiAutist6988
    @SpaghettiAutist6988 2 года назад +2

    Good stuff, informative and consciese

  • @kaidzz
    @kaidzz 2 года назад +2

    I didn't know Web Components is not that popular, because that's what I do right now and I find it more attractive than the normal one.

    • @uidotdev
      @uidotdev  2 года назад

      Thanks for watching!

  • @AlexSpieslechner
    @AlexSpieslechner 2 года назад +2

    haha i love the john mayer interview audio part

    • @uidotdev
      @uidotdev  2 года назад

      Such a great clip

  • @rootnode6571
    @rootnode6571 2 года назад +1

    Those final words of your narration gave me goosebumps! 👌

    • @uidotdev
      @uidotdev  2 года назад +1

      Thanks for watching!

  • @gavincoulson3900
    @gavincoulson3900 2 года назад +1

    Really great video, thanks for this.

  • @daedalus5070
    @daedalus5070 2 года назад

    Shopify implemented theme into their newest default theme and have to say - its very performant and easy to work with. Doubt its enough to bring them back but was a cool thing to see done well.

  • @perschonca
    @perschonca 2 года назад +2

    Your videos are great!!

  • @Amelia-st5ci
    @Amelia-st5ci 2 года назад +1

    Lit isn't a framework, it's a base class. Web components aren't meant to replace frameworks. Context is most important. How you choose to architect is based a lot on the scale of your project/ enterprise. There's a situation for every decision.

    • @uidotdev
      @uidotdev  2 года назад

      That's reasonable. Thanks for watching!

  • @Lestibournes
    @Lestibournes 9 месяцев назад

    I'd really like to try using web components together with HTMX to create a single page application that lives in the backend. It seems so much simpler than dealing with frameworks.

  • @Dxpress_
    @Dxpress_ 2 года назад +5

    What if we start with a more simple (in theory?) approach: Have a way for HTML to natively import other HTML from separate files, similarly to how we can already import CSS & JS via & tags respectively. Could be a new tag that functions something like this:
    **
    Consider this example:
    I want to make a very simple static website. It has 5 pages. Using a JS framework would be total overkill, so I'll just write it using native HTML/CSS/JS.
    I create a header component with a navigation menu containing links to all the pages on my website. This component has some CSS and maybe some JS to accommodate its functionality.
    Now I want to add this header component to all of my pages. I need to manually copy/paste the HTML that makes up this component 4 other times for the 4 other pages.
    Later, I decide I want to make some minor changes to the layout of the menu. Now I need to copy/paste those changes in every page again. This workflow just sucks, plain & simple.
    Part of the reason why I & others use JS frameworks is the convenience of writing a commonly shared component that can be easily added anywhere on any page, and easily modifiable from a single source.
    If there were a way to do _just this one thing_ alone natively by just importing one HTML file from another HTML file, that would be a massive improvement to developing websites natively as a whole. It should even have the benefit of being semantically meaningful as well. Web crawlers/search engines/screen readers/etc. should be able to navigate through the internally linked HTML from the tag that imports it & understand what it conveys, whereas dynamically rendering HTML using JS doesn't have that same benefit.

  • @justuslanguell
    @justuslanguell 2 года назад +2

    Nice Dean Kamen cameo

  • @someghosts
    @someghosts 2 года назад

    Is the problem that they didn’t start from the developer ux and work backwards to figure out the technicalities and principles? Instead they figured out the principles and theory that sounded good to them and didn’t prioritise what it was like to develop for?

  • @MatthewPeck_personal
    @MatthewPeck_personal 2 года назад

    @uidotdev ....the Emerson quote...I can't stop laughin man.

  • @victorpinasarnault9135
    @victorpinasarnault9135 2 года назад

    Flash was created by Macromedia, then accquired by Adobe in 2008, if I'm not mistake.

    • @uidotdev
      @uidotdev  2 года назад

      Yeah that was our mistake

  • @_guru
    @_guru 2 года назад +4

    U are awesome dude

  • @ZeroRegretz
    @ZeroRegretz Год назад

    We need more of these videos ❤😢

  • @mohammaddh8655
    @mohammaddh8655 6 месяцев назад

    2:05 the fact that he didnt made any rows completed with javascript is hilarious

  • @ashharmohd1455
    @ashharmohd1455 2 года назад

    Salesforce LWC OSS is build upon web Components and is very lightweight and easy to implement.

  • @michaelharveymusic
    @michaelharveymusic 2 года назад +2

    the social network is highly underated

  • @alexbrown7624
    @alexbrown7624 2 года назад +14

    Anaconda just came out with a new web framework, which uses web components and lets you run Python in the browser. Will be interesting to see if that helps make WC more mainstream

    • @uidotdev
      @uidotdev  2 года назад +2

      🧠

    • @pinklemon-m5v
      @pinklemon-m5v 2 года назад +6

      I wouldnt bet on it. Pyscript might be fine for python developers to grt their feet wet making apps or wrapping a program around a ui, but i dont see any profesional web developers adopting it as it serves absolutely no advantage at all to have python run in the browser. In fact, pythons block-indent syntax and poor support for lambdas make it a bad candidate even if we didnt have javascript..
      Besides, what are you going to do when you need a feature node supports? Learn javascript so you can serve an app made with python?
      If people want to use pyscript more power to them but if thats where we are at in 5 years im going to teach myself how to coal mine.

    • @nomadshiba
      @nomadshiba 2 года назад +3

      Python is bad

    • @TekExplorer
      @TekExplorer 2 года назад +10

      @@nomadshiba saying "Python is bad" helps no one. say why, or don't speak at all.

    • @pinklemon-m5v
      @pinklemon-m5v 2 года назад +4

      @@nomadshiba "python is bad ASS!" - I finished it for you, and I would never say otherwise I'm just saying things have there place.

  • @ApurvKhare
    @ApurvKhare 2 года назад +1

    Web components story isn't over, and to be more precise this was a misinterpreted story of web components. You might not see or use web components but they are used by some design system library

  • @PolBoss-jk4uq
    @PolBoss-jk4uq 7 месяцев назад

    Amazing, love the animations!

  • @topcringeandslander
    @topcringeandslander 2 года назад +3

    This was really well made. Subbed

  • @notfadeaway6617
    @notfadeaway6617 Год назад

    Interesting to see another history of javascript. What would happens if Jobs likes Flash?

  • @matrinoxtm
    @matrinoxtm 2 года назад +72

    I never understood the hate for having css and html inside your JavaScript file. That’s how it was done on native platforms, why not with JS?

    • @uidotdev
      @uidotdev  2 года назад +13

      100% agree

    • @rand0mtv660
      @rand0mtv660 2 года назад +10

      People hate change and from my experience, developers especially hate it. Just think about all times new version of Windows came out or new big update for something came out, people don't want to update because they don't like change. Humans are creatures of habit and routine.

    • @billkammermeier
      @billkammermeier 2 года назад +2

      in Windows Forms applications the styling was in a separate designer file away from the code.

    • @chase-bank
      @chase-bank 2 года назад +10

      The industry has always swung back and forth between aggressively separating concerns, and tightly coupling them together. And there's always resistance on both sides. Personally I was very against it, but after using Vue single file components, and more recently, finally learning React... It's not that bad. I like CSS, and so long as what I'm writing is *actually* CSS, I don't care wear I write it...

    • @dealloc
      @dealloc 2 года назад +2

      @@billkammermeier That was only introduced later in Visual Studio 2005 and was purely to avoid conflicts with the designer tool-changing the generated code can lead to bugs and errors. It is only separated by a single method `InitializeComponent`, generated by the designer.
      All the UI and logic can be co-located in the same file as it was in the earlier versions of Visual Studio.

  • @cirusMEDIA
    @cirusMEDIA 7 месяцев назад

    How does this compare to Razor Components from Microsoft?

  • @kh_trendy
    @kh_trendy Год назад +1

    I hate the sentiment that custom elements are too hard to use without a framework.
    The amount of frontend developers that have years of experience, but fall apart when they have to actually use standard APIs or understand issues not related to the framework they're using is astounding!
    No one teaches actual frontend development, only frameworks. On the surface, this is fine. However, it creates an entire class of "frontend developers" that can't function without their framework doing it for them.
    I'm not arguing that vanilla custom elements are the most developer friendly, but... It's not rocket science to use the platform or understand it.
    Nothing against anyone making a living riding the React train, but it's going to die. Every framework does as the platform evolves and new tooling is created.

  • @austinnar4494
    @austinnar4494 2 года назад +5

    Yo wtf this is S-tier content. Keep doing what you're doing, this channel is ready to blow up

    • @uidotdev
      @uidotdev  2 года назад

      Ayy that means a lot. Thank you!

  • @skillkrio
    @skillkrio 2 года назад

    Can you explain in layman terms what is contextual and non contextual learning which was mentioned in your site.

  • @ketanchaudhari2337
    @ketanchaudhari2337 2 года назад +2

    Love your content!! can you please make one about "why we need svelte"

    • @uidotdev
      @uidotdev  2 года назад

      That's on our list.

  • @kymzTech
    @kymzTech 2 года назад

    Nice , please where do you source those videos from

  • @Verzach3
    @Verzach3 2 года назад +4

    I love this videos

  • @codingprograms2078
    @codingprograms2078 2 года назад

    Flash was created by macromedia then acquired by Adobe.

    • @uidotdev
      @uidotdev  2 года назад

      So we've heard. Our bad.

  • @nocashirl
    @nocashirl 2 года назад

    It is worth mentioning how bad flash was though, proprietary and full of vulnerabilities and really didn't perform well on mobile devices.

  • @dapolcio3405
    @dapolcio3405 10 месяцев назад

    Flash wasn't created by Adobe but by Macromedia

  • @codediporpal
    @codediporpal 2 года назад

    1:05... AHEM. That was Macromedia. Or if you really want go get specific, Jonathan Gay, the same dude that make the 80's game Dark Castle for the Mac. Flash was already dominant before Adobe acquired it.

    • @uidotdev
      @uidotdev  2 года назад

      We love getting specific, but not on points like that :) Thanks for the correction.

  • @DK-ox7ze
    @DK-ox7ze 2 года назад

    In interviews we are often only told to use vanilla javascript. But in the interview, when asked to build a widget for example it's a good idea to have ui components in your code. So how do you suggest we do that? Should we use native web components (which are quite complex), or build functions returning templates?

    • @uidotdev
      @uidotdev  2 года назад +1

      This is more a signal that interviews are broken rather than anything about Web Components. In that scenario though, I would choose to write functions with pure DOM manipulation over raw Web Components.

    • @dealloc
      @dealloc 2 года назад +2

      The solution is obviously to re-implement React.

    • @DK-ox7ze
      @DK-ox7ze 2 года назад

      @@dealloc Can't do that in a 45 minutes interview.

    • @uidotdev
      @uidotdev  2 года назад

      @@dealloc galaxy brain

    • @dealloc
      @dealloc 2 года назад

      @@DK-ox7ze Don't let time be a limiting factor. You can learn anything :)
      While it was a little bit of a joke, I truly do mean that if you want to learn vanilla JS and how DOM works, to build a simple UI library.
      React is quite simple if you take the basic concepts of it. Do away with JSX and dig into the API and you'll understand its simplicity.
      The hard parts of React are the implementation details such as the scheduling and virtual DOM diffing.

  • @riddixdan5572
    @riddixdan5572 2 года назад +3

    Amazing video. Love the quality and the information. Keep em coming

  • @genechristiansomoza4931
    @genechristiansomoza4931 10 месяцев назад

    I don't see the issue with data flow. Why not just put the state in window. You just need an object and there you are.

  • @scottcook9749
    @scottcook9749 2 года назад

    Yeah....but what about Salesforce lwcs?

  • @nordicnomad5473
    @nordicnomad5473 Год назад

    So Steve jobs is the reason for all of these modern JS frameworks 😮

  • @ayoubalfurjani4531
    @ayoubalfurjani4531 2 года назад +8

    Your only down side is that you don't make a lot of videos, I'm hungry for such quality content

    • @enfieldli9296
      @enfieldli9296 2 года назад +7

      These high quality, well written/animated/structured video are a lot of work

    • @uidotdev
      @uidotdev  2 года назад +7

      We're working on it! Every video takes about 60-80 hours of work. So hard to make a lot of them.

    • @drewfoster1033
      @drewfoster1033 2 года назад +2

      @@uidotdev Doing a phenomenal job. Cannot thank you enough.

    • @uidotdev
      @uidotdev  2 года назад

      @@drewfoster1033 Thank you!

  • @archmad
    @archmad 2 года назад

    If you check micro frontend, you will notice it behaves like web components, irregardless of which js framework

    • @A.D.G
      @A.D.G 2 года назад

      Micro front-end results in a horrible mess of code for a developer and a bad experience for the user. Use one framework not multiple as the cost to maintain multiple isn’t worth it for a business and the end user doesn’t need that much code shipped to the client.

    • @archmad
      @archmad 2 года назад

      @@A.D.G it's not for everyone, dont tell me it doesnt have any use-case

  • @ShivanshSen7
    @ShivanshSen7 8 месяцев назад

    We use it Salesforce Development

  • @swallace21
    @swallace21 2 года назад

    How they handled CSS was a major negative.

  • @nikilragav
    @nikilragav 2 года назад

    What's the original RWE quote?

  • @Philson
    @Philson 2 года назад +3

    Angular>react

    • @uidotdev
      @uidotdev  2 года назад +1

      Both are fine

    • @TayambaMwanza
      @TayambaMwanza 2 года назад +1

      @@uidotdev would you consider doing one one the transition of angularjs to angular that was a pretty big event and pushed a lot to use react and the current state of angular.

    • @nomadshiba
      @nomadshiba 2 года назад +1

      svelte > frameworks
      use svelte make the web fast again

  • @stefankyriacou7151
    @stefankyriacou7151 2 года назад +2

    I've been working with native web components a lot lately, and the biggest thing that frameworks like lit give you on top web components is template bindings and some reduction in boilerplate; tbh, if they made a standardised, optional vDom to use for template bindings, I wouldn't be missing much from the more fleshed out frameworks/libraries.

  • @JohnBelluci
    @JohnBelluci 2 года назад

    Flash was created by Macromedia, then Adobe acquired it

    • @uidotdev
      @uidotdev  2 года назад

      Pedantic, but fair.

  • @johanlarsson9805
    @johanlarsson9805 2 года назад

    I was doing react in 2017..... i never realized how early I was...

  • @glibaudio
    @glibaudio 2 года назад +1

    GOAT

  • @sakuraba7870
    @sakuraba7870 Год назад

    Yeah WebComponents didn't take off - except most of Googles UIs are web components, most of gov.uk and nhs.uk are web components, and many built-in HTML5 elements are basically just web components... People use them ALL the time, so transparently that they don't even notice. Web Components are great - I wrote a wrapper with generates web components with built-in setState->(re)render behaviour, with DOM-diffing. It's so easy to get up and running quickly making components using that wrapper.

  • @sohhamm
    @sohhamm 2 года назад +8

    Keep making these, high quality content, would love for some technical content

  • @leonardoraele
    @leonardoraele 2 года назад

    Yeah, and now people are learning to love Web Components because they can be used regardless of the ui framework you use.

  • @quintencabo
    @quintencabo 2 года назад

    It's basically like Vue.

  • @fernandosanchezm
    @fernandosanchezm Месяц назад

    react and npm also requieres a lot of bullshit on his own, plain web components with a template are very economical on his own

  • @evertp
    @evertp 2 года назад +7

    I definitely feel that web components has use as framework-agnostic drop-in components.
    Plus, they are so nicely integrated in the browser. If I'm building regular (non-SPA) websites and need some bits of dynamic functionality, it seems like a nice fit. So to me they are a good companion to things like React and don't directly compete.

    • @uidotdev
      @uidotdev  2 года назад +1

      That's reasonable. I've always felt that at that point, I don't see much value in using a WC if you can just use a react component. But admittedly React support for WCs has been terrible until recently.

    • @evertp
      @evertp 2 года назад +1

      @@uidotdev Perhaps you're a developer of a payment gateway, and want to offer a great credit card field component =).
      I'm primary a developer of libraries for other devs. WC would definitely make the top of my list when I need to author an ui component, just like I'd prefer fetch over axios; the former is (now! finally!) universal/dependency free/opinionated even if it doesn't offer the same features as Axios.
      I find that generally my libraries reduce their dependencies over time as the web/node platform improves.
      But, if I were working on a single application that's not a dependency for many others, and the decision was already made to do a fat client/SPA, I also don't see a reason to build something with WC instead of React/Angular/whatever.

    • @SuperCraftler
      @SuperCraftler 2 года назад +3

      This! My take on WC is that its biggest fault was its marketing. Having worked on a component library for a +10k employee company, WC was a saving grace for it being a browser-standard rather than a runtime library. This made it possible that we were able to support every single website with the company.

  • @AndrewErwin73
    @AndrewErwin73 2 года назад

    React was created by awful engineers who couldn't figure out how to properly apply the MVC design pattern.

    • @uidotdev
      @uidotdev  2 года назад

      Wild this is still an argument in 2022.

  • @jurggjon
    @jurggjon 2 года назад

    Including Elisabeth Holmes as an example...

    • @uidotdev
      @uidotdev  2 года назад

      That's the joke 🙂

  • @YNA64
    @YNA64 2 года назад

    I heard comments were being deleted.

    • @uidotdev
      @uidotdev  2 года назад

      Nope. Comments actually help us. Regardless of if they agree or disagree with us.

    • @DannyMoerkerke
      @DannyMoerkerke 2 года назад

      @@uidotdev well, mine is gone...

    • @uidotdev
      @uidotdev  2 года назад

      @@DannyMoerkerke We get accused of this every video, regardless of how controversial or tame the topic is. I'm not sure what you said, but I promise we didn't delete it. Proof is that there are plenty of comments telling us how stupid we are - which is fine.

    • @jaredwhite88
      @jaredwhite88 2 года назад

      Don't see mine anywhere, so yeah.

    • @uidotdev
      @uidotdev  2 года назад

      @@jaredwhite88 You're essential calling us liars, and that's fine. But I promise on my brand new baby daughter who is 3 weeks old, we're not deleting comments. I'm not sure what else to say. I couldn't care less if you love WCs and think we're stupid. If you look at the comments, I've only complimented others who have had opposing views.

  • @RyanBBXD
    @RyanBBXD 2 года назад

    Why not support HTML import?