Contact Us
Web Components & Minimal API: porquê e quando usar?
Tempo de leitura: 4 minutos

Web Components & Minimal API: porquê e quando usar?

por Diogo Salaberri, Technical Project Manager (Enterprise Solutions), e Jorge Borralho, Tech Lead (Digital Xperience) @ Xpand IT

Quando falamos sobre os objetivos mais práticos do desenvolvimento web, funcionamento é uma das palavras-chave. É imperativo que tudo esteja operacional e a funcionar quando acedemos a uma aplicação ou plataforma em rede. Por exemplo, dentro de uma página na internet, muito conteúdo é carregado para nos ser visível – desde o design até ao texto e outros suportes visuais como vídeos, imagens, etc. 

São estes e outros os vários elementos que são necessários interligar para que o funcionamento seja assegurado. Como fazê-lo? Web components e minimal API poderão ser opções viáveis neste tipo de projetos de desenvolvimento web. Estes dois mecanismos foram explorados nos nossos webinares, as DEV Talks. Em 2022, a Xpand IT organizou uma sessão virtual dedicada ao uso e aplicação real de web components (as suas especificações e ferramentas) e minimal API (uma forma simples e diferenciada de criar APIs) – com demo incluída. 

O que são web components?

Web components são um conjunto de especificações, regras e práticas que podemos introduzir ou estender num componente HTML (em que as tags são sobejamente conhecidas, como: <div>, H1, H2, image, etc.). Ou seja, podemos criar os nossos próprios componentes e definir como estes se devem comportar quando estão operacionais.  Para isso, podemos explorar algumas das especificações mais recorrentes: 

  • Custom Elements. É a especificação que permite fundar e definir as regras para criar os componentes. Na prática, é utilizado para registar um componente personalizado para que este se comporte e seja utilizado como queremos 
  • Shadow DOM. Lembra-te: DOM são as siglas para Document Object Model, que são as interfaces de programação para documentos web. Um DOM já existe numa página original em HTML, mas com o Shadow DOM pode ser possível anexar outro DOM. A implementação de web components em Shadow DOM é opcional. Ao usares esta especificação, elementos como styles/CSS estão isolados. Ou seja, dependendo onde são criados, não estão expostos ao web component ou fora do web component.  Se criares um CSS fora do escopo do web component, este não consegue visualizá-lo. E se criar um CSS dentro do escopo do web component, esse CSS não é visto fora deste escopo. Na demo deste webinar, poderás ver como funcionam os web components com e sem shadow DOM. 
  • ES Modules. Este é uma das especificações mais triviais para quem usa JavaScript porque podemos definir como podemos criar diversos arquivos JavaScript (importar/exportar) e como migrá-los para outros arquivos em JavaScript ou em HTML – como também poderás espreitar na demo deste webinar. Com a especificação em ES Modules também será possível definir a inclusão e reutilização de documentos em JavaScript baseado em padrões, módulos ou desempenho 
  • HTML Template. Nesta especificação podemos definir um fragmento de HTML que vai ser o corpo do web component. O template é uma das default tags existente no HTML padrão. Mesmo podendo ser definido no momento de desenvolvimento, o HTML Template é uma boa prática porque o web component pode ser isolado ou importado para que se separe o código de uma maneira mais intuitiva e saudável para eventuais manutenções do projeto web no futuro 

Então, quando e como usar web components?

Muitos developers web acreditam que os web components não vieram retirar destaque ao trabalho das frameworks padrão para HTML e JavaScript (como React, Angular ou Viewer.js), mas sim preencher um lugar já existente no universo do desenvolvimento web. As frameworks que elencámos em cima são orientadas à construção de componentes de ação – esses componentes podem ser reutilizados no desenvolvimento de outras aplicações se corretamente aplicados. 

Já um web component tem a capacidade diferencial de ser ligado e compatível a projetos escritos em frameworks distintas- esta é uma solução muito recorrente no dia-a-dia das tecnológicas para que várias aplicações estejam interligadas. Assim, com os web components, os elementos HTML padrão são mantidos, mas há elevado potencial por serem altamente personalizados. 

É possível desenvolveres web components em Angular, React, Viewer.js ou até mesmo em JavaScript. Contudo, estas frameworks não estão otimizadas para isso pois podem falhar em performance, tamanho de bundle, capacidade de ligação, etc. Para isso, recomendamos: 

  • Svelte.js – Com uma forte vertente de desenvolvimento de web components, é uma das frameworks com um dos bundles mais pequenos possíveis (1.6KB – o que é altamente importante quando são criados vários web components). Também é uma framework que permite desenvolver aplicações web 
  • Stencil – Ferramenta especializada para apenas desenvolver web components reutilizáveis, personalizáveis, escaláveis, otimizados e compatíveis com qualquer browser. É gratuito e open-source

Minimal API: para que serve?

Minimal API é uma das mais recentes frameworks da linguagem de programação C#, já integrado na plataforma .NET 6, que serve para criar APIs (Application Programming Interfaces) de uma forma diferente, mas simples. 

As minimal APIs surgem com o objetivo de criar APIs HTTP que utilizem menos recursos ou recursos com ficheiros e features de tamanho reduzido, com um boilerplate reduzido, mantendo todas as potencialidades de .NET. Esta é uma boa solução para criar microsserviços de uma forma rápida, minimizando as dependências do ASP .NET Core e mantendo a performance demonstrada. 

Conclusão

Web components e minimal API permitem criar frontends e backends de formas diferentes. 

Web componentes são uma extensão da componente HTML. Agnóstica. Não é uma novidade, mas é muito útil para reutilizar componentes de uma aplicação web para outra, inclusive entre diferentes frameworks. 

Já as minimal API, uma nova framework, permitem criar API em .NET 6 e C# da forma mais rápida que já viste. 

Se gostaste deste blogpost, vem conhecer um caso prático de aplicação destas duas técnicas numa solução de software. 

Leave a comment

Comments

  1. يعمل مصنع إيليت بايب Elite Pipe في العراق كمحفز لتطوير البنية التحتية ، حيث يزود السوق بأنابيب البولي إيثيلين عالي الكثافة وأنابيب uPVC والتجهيزات التي تساهم في نمو ونجاح مختلف القطاعات.

  2. I appreciate you sharing this blog post. Thanks Again. Cool.

  3. very informative articles or reviews at this time.

  4. Thank you for disseminating this article on your blog. Once again, I appreciate it. Cool. connections game

  5. service ranking systems for cloud vendors

    khgfphsrs ptkvo qhyxhbc zgbu txidmlyybpbaivi

  6. over the counter prednisone cheap: http://prednisone1st.store/# where can i buy prednisone

  7. online datings: dating usa – adult online

  8. trustworthy canadian pharmacy online canadian pharmacy

  9. buy cheap mobic without dr prescription get generic mobic for sale how to buy cheap mobic without rx

  10. where can i buy amoxicillin over the counter order amoxicillin online no prescription – amoxicillin 500 mg capsule

  11. canadian pharmacy meds canadian pharmacy scam

  12. https://mobic.store/# generic mobic no prescription

  13. compare ed drugs: erection pills that work – non prescription ed pills

  14. get generic propecia pills cost of cheap propecia price

  15. Everything what you want to know about pills.
    best medication for ed: natural ed remedies – erectile dysfunction pills
    Cautions.

  16. legit canadian pharmacy canadian pharmacy reviews

  17. buying propecia tablets cost propecia without rx

  18. propecia generics propecia generics

  19. how to buy mobic without insurance buy mobic without dr prescription where can i get mobic prices

  20. amoxicillin 500: http://amoxicillins.com/# buy amoxicillin online without prescription

  21. amoxicillin 500mg buy online canada: amoxicillin 500 mg capsule amoxicillin medicine over the counter

  22. amoxicillin for sale online: https://amoxicillins.com/# amoxicillin 500mg for sale uk

  23. can i buy amoxicillin over the counter in australia amoxicillin 500mg pill – buy amoxicillin

  24. mobic otc: mobic without prescription – get cheap mobic without dr prescription

  25. legitimate canadian online pharmacies onlinepharmaciescanada com

  26. Drugs information sheet.
    ed pills otc: best treatment for ed – medicine for impotence
    Top 100 Searched Drugs.

  27. where to get amoxicillin over the counter: amoxicillin 500mg price canada amoxicillin 200 mg tablet

  28. order fenofibrate 160mg pills buy tricor without prescription generic fenofibrate 160mg

  29. cost of amoxicillin prescription amoxicillin 250 mg capsule – generic amoxil 500 mg

  30. https://propecia1st.science/# buying propecia without insurance

  31. canada rx pharmacy world canadian king pharmacy

  32. amoxicillin generic purchase amoxicillin online – amoxicillin 500 mg tablet

  33. buy propecia price cost propecia no prescription

  34. https://propecia1st.science/# order cheap propecia price

  35. canada drugs online reviews: legitimate canadian online pharmacies – canadian neighbor pharmacy

  36. india pharmacy mail order: online pharmacy india – buy prescription drugs from india

  37. https://certifiedcanadapharm.store/# canadian pharmacy online ship to usa

  38. canadian pharmacy no scripts: canadian drugs online – legit canadian pharmacy

  39. india pharmacy: canadian pharmacy india – india online pharmacy

  40. There is definately a lot to find out about this subject. I like all the points you made

  41. buying prescription drugs in mexico: mexico drug stores pharmacies – buying from online mexican pharmacy

  42. http://certifiedcanadapharm.store/# best canadian pharmacy to order from

  43. mexican border pharmacies shipping to usa: buying prescription drugs in mexico – mexico pharmacies prescription drugs

  44. recommended canadian pharmacies: rate canadian pharmacies – canadian pharmacy ed medications

  45. п»їlegitimate online pharmacies india: buy prescription drugs from india – indian pharmacy online

  46. https://indiamedicine.world/# п»їlegitimate online pharmacies india

  47. Your writing style is captivating, can’t wait for more!

  48. safe online pharmacies in canada: cheap canadian pharmacy – canada drug pharmacy

  49. https://mexpharmacy.sbs/# mexico pharmacies prescription drugs

  50. online shopping pharmacy india: top 10 pharmacies in india – buy prescription drugs from india

  51. I’m often to blogging and i really appreciate your content. The article has actually peaks my interest. I’m going to bookmark your web site and maintain checking for brand spanking new information.

  52. This was beautiful Admin. Thank you for your reflections.

  53. Pretty! This has been a really wonderful post. Many thanks for providing these details.

  54. over the counter cialis sildenafil in usa female viagra cvs

  55. order zaditor online cheap order zaditor 1 mg generic order imipramine 25mg sale

  56. mexican online pharmacies prescription drugs: mexican pharmaceuticals online – mexico drug stores pharmacies

  57. https://mexpharmacy.sbs/# mexico drug stores pharmacies

  58. buying from online mexican pharmacy: mexico drug stores pharmacies – mexican border pharmacies shipping to usa

  59. http://mexpharmacy.sbs/# mexico drug stores pharmacies

  60. http://mexpharmacy.sbs/# mexican border pharmacies shipping to usa

  61. https://azithromycin.men/# zithromax prescription in canada

  62. zithromax 500 without prescription zithromax capsules price zithromax z-pak price without insurance

  63. ivermectin over the counter canada: ivermectin new zealand – ivermectin 500ml

  64. http://azithromycin.men/# zithromax capsules 250mg

  65. order minoxytop without prescription medication for ed dysfunction buy ed pills without a prescription

  66. brand acarbose 25mg buy fulvicin order fulvicin 250mg pills

  67. neurontin oral: drug neurontin 20 mg – neurontin cost uk

  68. neurontin 400 mg neurontin prescription online neurontin 100 mg capsule

  69. where can i get zithromax: zithromax 500 price – where can i purchase zithromax online

  70. best online doctor for antibiotics: buy antibiotics from canada – buy antibiotics over the counter

  71. paxlovid pill: paxlovid india – paxlovid generic

  72. buy generic aspirin 75mg purchase zovirax online order imiquad sale

  73. how to cure ed: top ed drugs – cheap erectile dysfunction pills online

  74. https://misoprostol.guru/# buy cytotec pills online cheap

  75. http://misoprostol.guru/# Misoprostol 200 mg buy online

  76. http://lisinopril.pro/# best generic lisinopril

  77. buy dipyridamole 25mg sale plendil for sale buy pravastatin pills

  78. cost melatonin 3mg aygestin 5mg us danazol tablet

  79. http://lipitor.pro/# п»їlipitor price comparison

  80. http://lisinopril.pro/# lisinopril price without insurance

  81. http://avodart.pro/# can i buy cheap avodart without prescription

  82. buy generic duphaston 10 mg buy sitagliptin 100 mg generic order generic jardiance

  83. order florinef 100mcg generic buy fludrocortisone 100mcg pills order imodium 2 mg for sale

  84. … [Trackback]

    […] There you can find 17248 more Info to that Topic: careers.xpand-it.com/blog/web-components-minimal-api-porque-usar/ […]

  85. india pharmacy: india pharmacy mail order – world pharmacy india

  86. canadian pharmacy com canadian medications canadian pharmacy online reviews

  87. buy prescription drugs from india: top 10 pharmacies in india – reputable indian online pharmacy

  88. canadian pharmacy online online pharmacy canada pharmacy in canada

  89. http://mexicanpharmacy.guru/# mexican online pharmacies prescription drugs

  90. butterflies flutter among the blooming wildflowers excessive the feeling of soft sand between your toes is soothing and grounding

  91. buy monograph 600mg online cheap monograph 600mg uk where can i buy cilostazol

  92. buy prasugrel 10 mg generic order detrol 2mg detrol tablet

  93. To understand true to life news, dog these tips:

    Look in behalf of credible sources: http://tools4f.com/library/pgs/what-happened-to-katie-walls-on-spectrum-news.html. It’s high-ranking to guard that the report origin you are reading is worthy and unbiased. Some examples of reliable sources tabulate BBC, Reuters, and The Modish York Times. Read multiple sources to stimulate a well-rounded understanding of a isolated news event. This can better you listen to a more complete paint and dodge bias. Be hep of the viewpoint the article is coming from, as flush with respected hearsay sources can have bias. Fact-check the low-down with another origin if a news article seems too lurid or unbelievable. Till the end of time pass inevitable you are reading a fashionable article, as scandal can transmute quickly.

    By following these tips, you can become a more au fait dispatch reader and more wisely understand the world everywhere you.

  94. otc sildenafil viagra prescription online roman sildenafil

  95. viagra near me sildenafil 20mg tablets sildenafil citrate

  96. buy ferrous sulfate without prescription purchase betapace online cheap buy betapace generic

  97. herbal substitutes for viagra sildenafil no prescription buy viagra online cheap

  98. buy pyridostigmine generic mestinon 60 mg for sale maxalt 5mg usa

  99. generic vasotec 5mg buy duphalac bottles lactulose where to buy

  100. is cialis over the counter cialis tadalafil cialis cvs

  101. canada drugs reviews: safe online pharmacy canada – cheapest pharmacy canada

  102. order xalatan sale buy generic rivastigmine online cheap exelon

  103. … [Trackback]

    […] There you can find 55060 more Information to that Topic: careers.xpand-it.com/blog/web-components-minimal-api-porque-usar/ […]

  104. Absolutely! Conclusion information portals in the UK can be overwhelming, but there are tons resources at to help you find the unmatched identical as you. As I mentioned formerly, conducting an online search an eye to http://lawteacher.ac.uk/wp-content/pages/reasons-behind-joe-donlon-s-departure-from-news.html “UK scuttlebutt websites” or “British information portals” is a great starting point. Not one desire this hand out you a encyclopaedic shopping list of report websites, but it choice also afford you with a heartier savvy comprehension or of the in the air communication landscape in the UK.
    In the good old days you secure a itemize of future news portals, it’s prominent to estimate each anyone to choose which overwhelm suits your preferences. As an case, BBC Dispatch is known benefit of its objective reporting of information stories, while The Keeper is known quest of its in-depth analysis of political and sexual issues. The Independent is known for its investigative journalism, while The Times is known for its work and wealth coverage. By way of concession these differences, you can pick out the information portal that caters to your interests and provides you with the news you hope for to read.
    Additionally, it’s usefulness considering close by despatch portals with a view explicit regions within the UK. These portals produce coverage of events and good copy stories that are relevant to the area, which can be firstly utilitarian if you’re looking to keep up with events in your neighbourhood pub community. In search instance, shire news portals in London contain the Evening Canon and the Londonist, while Manchester Evening Scuttlebutt and Liverpool Reproduction are stylish in the North West.
    Blanket, there are many statement portals available in the UK, and it’s high-level to do your inspection to unearth the everybody that suits your needs. By means of evaluating the contrasting low-down portals based on their coverage, style, and article standpoint, you can select the one that provides you with the most fitting and interesting info stories. Esteemed success rate with your search, and I hope this tidings helps you reveal the correct expos‚ portal for you!

  105. cialis over the counter at walmart which is better viagra or cialis cialis 100mg

  106. buy betahistine 16mg buy haloperidol 10 mg online order benemid 500mg generic

  107. п»їlegitimate online pharmacies india: Online pharmacy India – reputable indian online pharmacy

  108. buy omeprazole pill purchase montelukast generic order lopressor pill

  109. premarin 600 mg ca viagra sildenafil 100mg sildenafil pills

  110. buy telmisartan medication molnunat 200 mg oral oral molnunat 200 mg

  111. brand tadalafil 10mg purchase cialis online order sildenafil 50mg pill

  112. over the counter cialis walgreens tadalafil generic cost printable cialis coupon

  113. buy cheap cenforce buy cenforce sale aralen 250mg cheap

  114. how long does cialis last in your system cialis cheap online cialis com coupons

  115. canadian pharmacy cheap: certified online pharmacy canada – canada drug pharmacy

  116. Anna Berezina is a renowned originator and keynoter in the field of psychology. With a family in clinical feelings and all-embracing probing circumstance, Anna has dedicated her calling to agreement philanthropist behavior and unstable health: https://www.openlearning.com/u/floodward-s0yyvl/blog/AnnaBerezinaAndLeonidKanevskyADynamicDuoWithinTheArtIndustry. Including her achievement, she has made relevant contributions to the strength and has fit a respected contemplating leader.

    Anna’s skill spans various areas of thinking, including cognitive psychology, unmistakable psychology, and zealous intelligence. Her widespread understanding in these domains allows her to provide valuable insights and strategies exchange for individuals seeking offensive flowering and well-being.

    As an inventor, Anna has written distinct influential books that cause garnered widespread notice and praise. Her books offer mundane information and evidence-based approaches to help individuals command fulfilling lives and develop resilient mindsets. Through combining her clinical dexterity with her passion suited for helping others, Anna’s writings have resonated with readers roughly the world.

  117. buying prescription drugs in mexico: best online pharmacies in mexico – buying from online mexican pharmacy

  118. canadian pharmacies that ship to the us buying prescription drugs in canada buy prescription drugs online without doctor

  119. provigil medication promethazine pills purchase deltasone generic

  120. cost of viagra best place to buy viagra online watermelon viagra

  121. buy cefdinir 300mg generic order generic prevacid 15mg buy lansoprazole 15mg pill

  122. … [Trackback]

    […] Find More on to that Topic: careers.xpand-it.com/blog/web-components-minimal-api-porque-usar/ […]

  123. order accutane 40mg sale order zithromax 500mg generic azithromycin 250mg sale

  124. http://interpharm.pro/# canada prescription online
    top rated canadian pharmacy online – internationalpharmacy.icu Their global presence ensures prompt medication deliveries.

  125. order atorvastatin 40mg pill lipitor 80mg drug buy amlodipine generic

  126. https://onlineapotheke.tech/# online apotheke versandkostenfrei

  127. п»їpharmacie en ligne pharmacie ouverte 24/24 Pharmacie en ligne France

  128. buy azipro generic buy prednisolone 40mg for sale purchase neurontin generic

  129. http://farmaciaonline.men/# farmacia online piГ№ conveniente

  130. online slot games casino near me lasix 100mg over the counter

  131. buy pantoprazole 20mg without prescription buy pyridium buy pyridium sale

  132. Viagra sans ordonnance 24h

  133. https://esfarmacia.men/# farmacia online internacional

  134. farmacia online migliore: viagra generico – comprare farmaci online con ricetta

  135. doubleu casino online casino order ventolin inhalator without prescription albuterol us

  136. http://edpharmacie.pro/# acheter mГ©dicaments Г  l’Г©tranger

  137. migliori farmacie online 2023: Cialis senza ricetta in farmacia – acquistare farmaci senza ricetta

  138. What’s uup to every one, the ccontents exsting at this website arre aactually amazimg for
    people experience, well, keep up thee good wokrk fellows.

    Also vidit mmy homepage: 3156

  139. https://edpharmacie.pro/# Pharmacie en ligne sans ordonnance

  140. Thanks ffor thee marvelus posting! I reeally enjoyed rewding it, you can bee a great author.
    I will mzke sure too bookmark your blog annd maay come
    back someday.I want tto encoourage that you continue yyour gret posts,
    have a nuce holiday weekend!

    Take a look at my homepage – 4399

  141. buy amantadine sale atenolol 100mg uk purchase dapsone online

  142. free casino slots world tavern poker online stromectol 6 mg tablet