SlideShare uma empresa Scribd logo

LPUG Meetup #13 - Compartilhando bibliotecas JS entre Angular e React no Liferay - 2021-06-30

Apresentação de Roselaine Marques no meetup #13 do Grupo de Utilizadores de Liferay de Portugal em 30-06-2021

1 de 13
Baixar para ler offline
Compartilhando
bibliotecas JS entre
Angular e React
no Liferay
Roselaine Marques
Sep 03, 2020
Consultant at Liferay Global Services
RoselaineMarq10
> Compreendendo a diferença entre projetos
JS e Hybrid em Liferay
> Vantagens de utilizar “Biblioteca
Compartilhada”
> Como criar um "Javascript de Biblioteca
Compartilhada"
> Como consumir um “Javascript de Biblioteca
Compartilhada” com Angular
> Como consumir um Javascript de Biblioteca
Compartilhada com React
Sumário
Você sabe conhece realmente os módulos que podem utilizar React,
Angular, ou Vue ?
yo liferay-js
1
2 blade create npm-angular-portlet
...Ambos oferecem a possibilidade,
mas com uma grande diferenca?
L
I
F
E
R
A
Y
Era digital , canais inteligentes
DO SEU PORTAL
USEM < NPM INSTALL > COM MODERAÇÃO!!!
Possíveis problemas ao não utilizar uma biblioteca compartilhada?
Perda de desempenho: Arquivos JS serão baixados para cada módulo (aqueles da
dependência) o que implica em um tempo de carregamento maior.
Possíveis conflitos entre as versões: Se você usar versões diferentes do angular,
pode haver conflitos.
Maior tempo de construção: por ter que empacotar o módulo com todas as suas
dependências, o tempo de construção é consideravelmente alto.
1
2
3
Vantagens de utilizar “Biblioteca Compartilhada”,
evitar os problemas acima XD…
e alguns mais nao mencionados...
L
I
F
E
R
A
Y
Impacto dos Desafios
Como criar um "Javascript de Biblioteca Compartilhada"
Anúncio

Recomendados

MicroProfile benefits for your monolithic applications
MicroProfile benefits for your monolithic applicationsMicroProfile benefits for your monolithic applications
MicroProfile benefits for your monolithic applicationsVíctor Leonel Orozco López
 
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UICleiton Francisco
 
Apresentacão Android Components - Programando em camadas
Apresentacão Android Components - Programando em camadasApresentacão Android Components - Programando em camadas
Apresentacão Android Components - Programando em camadasVictor Aldir
 
Diego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci
 
Distribuindo Containers com VSTS
Distribuindo Containers com VSTSDistribuindo Containers com VSTS
Distribuindo Containers com VSTSJulio Arruda
 
Vagrant: Na sua máquina também funciona!
Vagrant: Na sua máquina também funciona!Vagrant: Na sua máquina também funciona!
Vagrant: Na sua máquina também funciona!Glauton Vieira
 
Meteor um overview sobre a plataforma
Meteor   um overview sobre a plataformaMeteor   um overview sobre a plataforma
Meteor um overview sobre a plataformaCaio Ribeiro Pereira
 

Mais conteúdo relacionado

Mais procurados

Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...Bruno Rodrigo S. Souza
 
Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017
Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017
Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017Renato Groff
 
MEAN Full Stack JavaScript - TaSafoConf 2015
MEAN Full Stack JavaScript - TaSafoConf 2015MEAN Full Stack JavaScript - TaSafoConf 2015
MEAN Full Stack JavaScript - TaSafoConf 2015Kaio Valente
 
Microservices - Quebrando gigantes em pequenos
Microservices - Quebrando gigantes em pequenosMicroservices - Quebrando gigantes em pequenos
Microservices - Quebrando gigantes em pequenosVinícius Krolow
 
ExtJS - Jumpstart para o Grupo DevRioClaro
ExtJS - Jumpstart para o Grupo DevRioClaroExtJS - Jumpstart para o Grupo DevRioClaro
ExtJS - Jumpstart para o Grupo DevRioClaroDaniel Da Cunha Bueno
 
Introdução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsIntrodução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsCloves Moreira Junior
 
Startuping user stories
Startuping user storiesStartuping user stories
Startuping user storiesFábio Santos
 

Mais procurados (13)

React - Introdução
React - IntroduçãoReact - Introdução
React - Introdução
 
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
 
Micro serviços ppt
Micro serviços pptMicro serviços ppt
Micro serviços ppt
 
Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017
Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017
Arquitetura de Microserviços - Tecnologia na Prática - Julho/2017
 
MEAN Full Stack JavaScript - TaSafoConf 2015
MEAN Full Stack JavaScript - TaSafoConf 2015MEAN Full Stack JavaScript - TaSafoConf 2015
MEAN Full Stack JavaScript - TaSafoConf 2015
 
Microservices - Quebrando gigantes em pequenos
Microservices - Quebrando gigantes em pequenosMicroservices - Quebrando gigantes em pequenos
Microservices - Quebrando gigantes em pequenos
 
Aula16 - Jquery
Aula16 - JqueryAula16 - Jquery
Aula16 - Jquery
 
Integração e APIs com Mulesoft
Integração e APIs com MulesoftIntegração e APIs com Mulesoft
Integração e APIs com Mulesoft
 
ExtJS - Jumpstart para o Grupo DevRioClaro
ExtJS - Jumpstart para o Grupo DevRioClaroExtJS - Jumpstart para o Grupo DevRioClaro
ExtJS - Jumpstart para o Grupo DevRioClaro
 
Mono
MonoMono
Mono
 
Introdução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsIntrodução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular js
 
Startuping user stories
Startuping user storiesStartuping user stories
Startuping user stories
 
Introdução ao Nodejs
Introdução ao NodejsIntrodução ao Nodejs
Introdução ao Nodejs
 

Semelhante a LPUG Meetup #13 - Compartilhando bibliotecas JS entre Angular e React no Liferay - 2021-06-30

Introdução JQuery
Introdução JQueryIntrodução JQuery
Introdução JQueryinfo_cimol
 
J query apostila - noções básicas
J query   apostila - noções básicasJ query   apostila - noções básicas
J query apostila - noções básicasLuciano Marwell
 
JQuery - introdução ao
JQuery - introdução ao JQuery - introdução ao
JQuery - introdução ao Daniel Filho
 
Modularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse Virgo
Modularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse VirgoModularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse Virgo
Modularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse VirgoRegis Machado
 
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )Getúlio Strapazzon
 
A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJSRodrigo Branas
 
Como deixar de fazer "copy and paste" entre Windows Store e Windows Phone Apps
Como deixar de fazer "copy and paste" entre Windows Store e Windows Phone AppsComo deixar de fazer "copy and paste" entre Windows Store e Windows Phone Apps
Como deixar de fazer "copy and paste" entre Windows Store e Windows Phone AppsComunidade NetPonto
 
Aprendendo Angular com a CLI
Aprendendo Angular com a CLIAprendendo Angular com a CLI
Aprendendo Angular com a CLIVanessa Me Tonini
 
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação WebDjango Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação Webantonio sérgio nogueira
 
Eclipse user guide
Eclipse user guideEclipse user guide
Eclipse user guideLucas Cruz
 
Maven: Introdução
Maven: IntroduçãoMaven: Introdução
Maven: IntroduçãoJugVale
 
jQuery - A poderosa Biblioteca JavaScript - Minicurso
jQuery - A poderosa Biblioteca JavaScript - MinicursojQuery - A poderosa Biblioteca JavaScript - Minicurso
jQuery - A poderosa Biblioteca JavaScript - MinicursoCloves Moreira Junior
 
Primeiros passos para tomar uma decisão de arquitetura com AngularJS.
Primeiros passos para tomar uma decisão de arquitetura com AngularJS.Primeiros passos para tomar uma decisão de arquitetura com AngularJS.
Primeiros passos para tomar uma decisão de arquitetura com AngularJS.Cauê Alves
 

Semelhante a LPUG Meetup #13 - Compartilhando bibliotecas JS entre Angular e React no Liferay - 2021-06-30 (20)

Introdução JQuery
Introdução JQueryIntrodução JQuery
Introdução JQuery
 
J query apostila - noções básicas
J query   apostila - noções básicasJ query   apostila - noções básicas
J query apostila - noções básicas
 
JQuery - introdução ao
JQuery - introdução ao JQuery - introdução ao
JQuery - introdução ao
 
J query basico
J query basicoJ query basico
J query basico
 
Plugin Maven no Eclipse
Plugin Maven no EclipsePlugin Maven no Eclipse
Plugin Maven no Eclipse
 
Modularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse Virgo
Modularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse VirgoModularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse Virgo
Modularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse Virgo
 
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
 
A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJS
 
Como deixar de fazer "copy and paste" entre Windows Store e Windows Phone Apps
Como deixar de fazer "copy and paste" entre Windows Store e Windows Phone AppsComo deixar de fazer "copy and paste" entre Windows Store e Windows Phone Apps
Como deixar de fazer "copy and paste" entre Windows Store e Windows Phone Apps
 
Aprendendo Angular com a CLI
Aprendendo Angular com a CLIAprendendo Angular com a CLI
Aprendendo Angular com a CLI
 
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação WebDjango Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
 
Liferay e Modularização com Arquitetura OSGi
Liferay e Modularização com Arquitetura OSGiLiferay e Modularização com Arquitetura OSGi
Liferay e Modularização com Arquitetura OSGi
 
Eclipse user guide
Eclipse user guideEclipse user guide
Eclipse user guide
 
Angular 2
Angular 2Angular 2
Angular 2
 
Curso de ReactJS
Curso de ReactJSCurso de ReactJS
Curso de ReactJS
 
Aula09 - Java Script
Aula09 - Java ScriptAula09 - Java Script
Aula09 - Java Script
 
Maven: Introdução
Maven: IntroduçãoMaven: Introdução
Maven: Introdução
 
jQuery - A poderosa Biblioteca JavaScript - Minicurso
jQuery - A poderosa Biblioteca JavaScript - MinicursojQuery - A poderosa Biblioteca JavaScript - Minicurso
jQuery - A poderosa Biblioteca JavaScript - Minicurso
 
Primeiros passos para tomar uma decisão de arquitetura com AngularJS.
Primeiros passos para tomar uma decisão de arquitetura com AngularJS.Primeiros passos para tomar uma decisão de arquitetura com AngularJS.
Primeiros passos para tomar uma decisão de arquitetura com AngularJS.
 
Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5
 

Mais de Fernando Fernández

Forget Liferay. Use Liferay, Instead - DEVCON 2023.pdf
Forget Liferay. Use Liferay, Instead - DEVCON 2023.pdfForget Liferay. Use Liferay, Instead - DEVCON 2023.pdf
Forget Liferay. Use Liferay, Instead - DEVCON 2023.pdfFernando Fernández
 
LPUG #19 - Agenda e Community Updates - 2023-03-29.pdf
LPUG #19 - Agenda e Community Updates - 2023-03-29.pdfLPUG #19 - Agenda e Community Updates - 2023-03-29.pdf
LPUG #19 - Agenda e Community Updates - 2023-03-29.pdfFernando Fernández
 
LPUG #18 - Agenda e Community Updates - 2023-01-18.pdf
LPUG #18 - Agenda e Community Updates - 2023-01-18.pdfLPUG #18 - Agenda e Community Updates - 2023-01-18.pdf
LPUG #18 - Agenda e Community Updates - 2023-01-18.pdfFernando Fernández
 
LPUG #17 - Agenda e Community Updates - 2022-09-28
LPUG #17 - Agenda e Community Updates - 2022-09-28LPUG #17 - Agenda e Community Updates - 2022-09-28
LPUG #17 - Agenda e Community Updates - 2022-09-28Fernando Fernández
 
LPUG #17 - Esqueçam o Liferay, usem antes Liferay - 2022-09-28.pdf
LPUG #17 - Esqueçam o Liferay, usem antes Liferay - 2022-09-28.pdfLPUG #17 - Esqueçam o Liferay, usem antes Liferay - 2022-09-28.pdf
LPUG #17 - Esqueçam o Liferay, usem antes Liferay - 2022-09-28.pdfFernando Fernández
 
LPUG #16 - Collection Providers - 2022-06-15.pdf
LPUG #16 - Collection Providers - 2022-06-15.pdfLPUG #16 - Collection Providers - 2022-06-15.pdf
LPUG #16 - Collection Providers - 2022-06-15.pdfFernando Fernández
 
LPUG #16 - Agenda e Community Updates - 2022-06-15.pdf
LPUG #16 - Agenda e Community Updates - 2022-06-15.pdfLPUG #16 - Agenda e Community Updates - 2022-06-15.pdf
LPUG #16 - Agenda e Community Updates - 2022-06-15.pdfFernando Fernández
 
LPUG Meetup #15 - Reinvenção do Liferay
LPUG Meetup #15 - Reinvenção do LiferayLPUG Meetup #15 - Reinvenção do Liferay
LPUG Meetup #15 - Reinvenção do LiferayFernando Fernández
 
LPUG Meetup #14 Agenda e Community Updates - 2021-09-22
LPUG Meetup #14   Agenda e Community Updates - 2021-09-22LPUG Meetup #14   Agenda e Community Updates - 2021-09-22
LPUG Meetup #14 Agenda e Community Updates - 2021-09-22Fernando Fernández
 
LPUG Meetup #13 - Novidades Liferay 7.4 CE - 2021-06-30
LPUG Meetup #13 - Novidades Liferay 7.4 CE - 2021-06-30LPUG Meetup #13 - Novidades Liferay 7.4 CE - 2021-06-30
LPUG Meetup #13 - Novidades Liferay 7.4 CE - 2021-06-30Fernando Fernández
 
LPUG Meetup #13 - Agenda e community updates - 2021-06-30
LPUG Meetup #13 - Agenda e community updates - 2021-06-30LPUG Meetup #13 - Agenda e community updates - 2021-06-30
LPUG Meetup #13 - Agenda e community updates - 2021-06-30Fernando Fernández
 
Entrega eficiente de conteúdos em sites complexos
Entrega eficiente de conteúdos em sites complexosEntrega eficiente de conteúdos em sites complexos
Entrega eficiente de conteúdos em sites complexosFernando Fernández
 
LPUG Meetup #12 - Vitórias Rápidas com Liferay 7.3
LPUG Meetup #12 - Vitórias Rápidas com Liferay 7.3LPUG Meetup #12 - Vitórias Rápidas com Liferay 7.3
LPUG Meetup #12 - Vitórias Rápidas com Liferay 7.3Fernando Fernández
 
LPUG Meetup #12 - Agenda e Community Updates
LPUG Meetup #12 - Agenda e Community UpdatesLPUG Meetup #12 - Agenda e Community Updates
LPUG Meetup #12 - Agenda e Community UpdatesFernando Fernández
 
LPUG Meetup #12 - Destaques DEVCON
LPUG Meetup #12 - Destaques DEVCONLPUG Meetup #12 - Destaques DEVCON
LPUG Meetup #12 - Destaques DEVCONFernando Fernández
 
LPUG #11 portal 7.3 'final' - 2020-12-09
LPUG #11   portal 7.3 'final' - 2020-12-09LPUG #11   portal 7.3 'final' - 2020-12-09
LPUG #11 portal 7.3 'final' - 2020-12-09Fernando Fernández
 
LPUG #11 agenda e community updates - 2020-12-09
LPUG #11   agenda e community updates - 2020-12-09LPUG #11   agenda e community updates - 2020-12-09
LPUG #11 agenda e community updates - 2020-12-09Fernando Fernández
 
LPUG #10 agenda e community updates - 2020-09-16
LPUG #10   agenda e community updates - 2020-09-16LPUG #10   agenda e community updates - 2020-09-16
LPUG #10 agenda e community updates - 2020-09-16Fernando Fernández
 
LPUG Meetup #9 - Agenda e Community Updates - 2020-06-30
LPUG Meetup #9 - Agenda e Community Updates - 2020-06-30LPUG Meetup #9 - Agenda e Community Updates - 2020-06-30
LPUG Meetup #9 - Agenda e Community Updates - 2020-06-30Fernando Fernández
 
Liferay UG Meetup #8 - Community updates - 2020-03-04
Liferay UG Meetup #8 - Community updates - 2020-03-04Liferay UG Meetup #8 - Community updates - 2020-03-04
Liferay UG Meetup #8 - Community updates - 2020-03-04Fernando Fernández
 

Mais de Fernando Fernández (20)

Forget Liferay. Use Liferay, Instead - DEVCON 2023.pdf
Forget Liferay. Use Liferay, Instead - DEVCON 2023.pdfForget Liferay. Use Liferay, Instead - DEVCON 2023.pdf
Forget Liferay. Use Liferay, Instead - DEVCON 2023.pdf
 
LPUG #19 - Agenda e Community Updates - 2023-03-29.pdf
LPUG #19 - Agenda e Community Updates - 2023-03-29.pdfLPUG #19 - Agenda e Community Updates - 2023-03-29.pdf
LPUG #19 - Agenda e Community Updates - 2023-03-29.pdf
 
LPUG #18 - Agenda e Community Updates - 2023-01-18.pdf
LPUG #18 - Agenda e Community Updates - 2023-01-18.pdfLPUG #18 - Agenda e Community Updates - 2023-01-18.pdf
LPUG #18 - Agenda e Community Updates - 2023-01-18.pdf
 
LPUG #17 - Agenda e Community Updates - 2022-09-28
LPUG #17 - Agenda e Community Updates - 2022-09-28LPUG #17 - Agenda e Community Updates - 2022-09-28
LPUG #17 - Agenda e Community Updates - 2022-09-28
 
LPUG #17 - Esqueçam o Liferay, usem antes Liferay - 2022-09-28.pdf
LPUG #17 - Esqueçam o Liferay, usem antes Liferay - 2022-09-28.pdfLPUG #17 - Esqueçam o Liferay, usem antes Liferay - 2022-09-28.pdf
LPUG #17 - Esqueçam o Liferay, usem antes Liferay - 2022-09-28.pdf
 
LPUG #16 - Collection Providers - 2022-06-15.pdf
LPUG #16 - Collection Providers - 2022-06-15.pdfLPUG #16 - Collection Providers - 2022-06-15.pdf
LPUG #16 - Collection Providers - 2022-06-15.pdf
 
LPUG #16 - Agenda e Community Updates - 2022-06-15.pdf
LPUG #16 - Agenda e Community Updates - 2022-06-15.pdfLPUG #16 - Agenda e Community Updates - 2022-06-15.pdf
LPUG #16 - Agenda e Community Updates - 2022-06-15.pdf
 
LPUG Meetup #15 - Reinvenção do Liferay
LPUG Meetup #15 - Reinvenção do LiferayLPUG Meetup #15 - Reinvenção do Liferay
LPUG Meetup #15 - Reinvenção do Liferay
 
LPUG Meetup #14 Agenda e Community Updates - 2021-09-22
LPUG Meetup #14   Agenda e Community Updates - 2021-09-22LPUG Meetup #14   Agenda e Community Updates - 2021-09-22
LPUG Meetup #14 Agenda e Community Updates - 2021-09-22
 
LPUG Meetup #13 - Novidades Liferay 7.4 CE - 2021-06-30
LPUG Meetup #13 - Novidades Liferay 7.4 CE - 2021-06-30LPUG Meetup #13 - Novidades Liferay 7.4 CE - 2021-06-30
LPUG Meetup #13 - Novidades Liferay 7.4 CE - 2021-06-30
 
LPUG Meetup #13 - Agenda e community updates - 2021-06-30
LPUG Meetup #13 - Agenda e community updates - 2021-06-30LPUG Meetup #13 - Agenda e community updates - 2021-06-30
LPUG Meetup #13 - Agenda e community updates - 2021-06-30
 
Entrega eficiente de conteúdos em sites complexos
Entrega eficiente de conteúdos em sites complexosEntrega eficiente de conteúdos em sites complexos
Entrega eficiente de conteúdos em sites complexos
 
LPUG Meetup #12 - Vitórias Rápidas com Liferay 7.3
LPUG Meetup #12 - Vitórias Rápidas com Liferay 7.3LPUG Meetup #12 - Vitórias Rápidas com Liferay 7.3
LPUG Meetup #12 - Vitórias Rápidas com Liferay 7.3
 
LPUG Meetup #12 - Agenda e Community Updates
LPUG Meetup #12 - Agenda e Community UpdatesLPUG Meetup #12 - Agenda e Community Updates
LPUG Meetup #12 - Agenda e Community Updates
 
LPUG Meetup #12 - Destaques DEVCON
LPUG Meetup #12 - Destaques DEVCONLPUG Meetup #12 - Destaques DEVCON
LPUG Meetup #12 - Destaques DEVCON
 
LPUG #11 portal 7.3 'final' - 2020-12-09
LPUG #11   portal 7.3 'final' - 2020-12-09LPUG #11   portal 7.3 'final' - 2020-12-09
LPUG #11 portal 7.3 'final' - 2020-12-09
 
LPUG #11 agenda e community updates - 2020-12-09
LPUG #11   agenda e community updates - 2020-12-09LPUG #11   agenda e community updates - 2020-12-09
LPUG #11 agenda e community updates - 2020-12-09
 
LPUG #10 agenda e community updates - 2020-09-16
LPUG #10   agenda e community updates - 2020-09-16LPUG #10   agenda e community updates - 2020-09-16
LPUG #10 agenda e community updates - 2020-09-16
 
LPUG Meetup #9 - Agenda e Community Updates - 2020-06-30
LPUG Meetup #9 - Agenda e Community Updates - 2020-06-30LPUG Meetup #9 - Agenda e Community Updates - 2020-06-30
LPUG Meetup #9 - Agenda e Community Updates - 2020-06-30
 
Liferay UG Meetup #8 - Community updates - 2020-03-04
Liferay UG Meetup #8 - Community updates - 2020-03-04Liferay UG Meetup #8 - Community updates - 2020-03-04
Liferay UG Meetup #8 - Community updates - 2020-03-04
 

Último

MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docxMAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docxjosecarlos413721
 
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docxATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx2m Assessoria
 
Apresentação bichinhos da TI: o que é esse arquiteto de software
Apresentação bichinhos da TI: o que é esse arquiteto de softwareApresentação bichinhos da TI: o que é esse arquiteto de software
Apresentação bichinhos da TI: o que é esse arquiteto de softwareAleatório .
 
ATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docx
ATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docxATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docx
ATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docx2m Assessoria
 
Uniagil - LACP - Lean Agile Coach Professional 2024.pdf
Uniagil - LACP - Lean Agile Coach Professional 2024.pdfUniagil - LACP - Lean Agile Coach Professional 2024.pdf
Uniagil - LACP - Lean Agile Coach Professional 2024.pdfPatriciaAraujo658854
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx2m Assessoria
 
Aula 01 - Desenvolvimento web - A internet.pptx
Aula 01 - Desenvolvimento web - A internet.pptxAula 01 - Desenvolvimento web - A internet.pptx
Aula 01 - Desenvolvimento web - A internet.pptxHugoHoch2
 
ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...
ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...
ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...2m Assessoria
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxjosecarlos413721
 
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docxMAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx2m Assessoria
 
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docxATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docxjosecarlos413721
 
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docxATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx2m Assessoria
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx2m Assessoria
 
ATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docxATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docx2m Assessoria
 
MAPA - DESENHO TÉCNICO - 51-2024.docx
MAPA   -   DESENHO TÉCNICO - 51-2024.docxMAPA   -   DESENHO TÉCNICO - 51-2024.docx
MAPA - DESENHO TÉCNICO - 51-2024.docx2m Assessoria
 
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docxMAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx2m Assessoria
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxjosecarlos413721
 

Último (17)

MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docxMAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
 
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docxATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
 
Apresentação bichinhos da TI: o que é esse arquiteto de software
Apresentação bichinhos da TI: o que é esse arquiteto de softwareApresentação bichinhos da TI: o que é esse arquiteto de software
Apresentação bichinhos da TI: o que é esse arquiteto de software
 
ATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docx
ATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docxATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docx
ATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docx
 
Uniagil - LACP - Lean Agile Coach Professional 2024.pdf
Uniagil - LACP - Lean Agile Coach Professional 2024.pdfUniagil - LACP - Lean Agile Coach Professional 2024.pdf
Uniagil - LACP - Lean Agile Coach Professional 2024.pdf
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
Aula 01 - Desenvolvimento web - A internet.pptx
Aula 01 - Desenvolvimento web - A internet.pptxAula 01 - Desenvolvimento web - A internet.pptx
Aula 01 - Desenvolvimento web - A internet.pptx
 
ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...
ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...
ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docxMAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
 
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docxATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
 
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docxATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
ATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docxATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docx
 
MAPA - DESENHO TÉCNICO - 51-2024.docx
MAPA   -   DESENHO TÉCNICO - 51-2024.docxMAPA   -   DESENHO TÉCNICO - 51-2024.docx
MAPA - DESENHO TÉCNICO - 51-2024.docx
 
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docxMAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 

LPUG Meetup #13 - Compartilhando bibliotecas JS entre Angular e React no Liferay - 2021-06-30

  • 1. Compartilhando bibliotecas JS entre Angular e React no Liferay Roselaine Marques Sep 03, 2020 Consultant at Liferay Global Services RoselaineMarq10
  • 2. > Compreendendo a diferença entre projetos JS e Hybrid em Liferay > Vantagens de utilizar “Biblioteca Compartilhada” > Como criar um "Javascript de Biblioteca Compartilhada" > Como consumir um “Javascript de Biblioteca Compartilhada” com Angular > Como consumir um Javascript de Biblioteca Compartilhada com React Sumário
  • 3. Você sabe conhece realmente os módulos que podem utilizar React, Angular, ou Vue ? yo liferay-js 1 2 blade create npm-angular-portlet ...Ambos oferecem a possibilidade, mas com uma grande diferenca?
  • 4. L I F E R A Y Era digital , canais inteligentes DO SEU PORTAL USEM < NPM INSTALL > COM MODERAÇÃO!!!
  • 5. Possíveis problemas ao não utilizar uma biblioteca compartilhada? Perda de desempenho: Arquivos JS serão baixados para cada módulo (aqueles da dependência) o que implica em um tempo de carregamento maior. Possíveis conflitos entre as versões: Se você usar versões diferentes do angular, pode haver conflitos. Maior tempo de construção: por ter que empacotar o módulo com todas as suas dependências, o tempo de construção é consideravelmente alto. 1 2 3 Vantagens de utilizar “Biblioteca Compartilhada”, evitar os problemas acima XD… e alguns mais nao mencionados...
  • 6. L I F E R A Y Impacto dos Desafios Como criar um "Javascript de Biblioteca Compartilhada"
  • 7. Obrigatório: Node, Yeoman e NPM instalados 1. Primeiramente, é necessário instalar o generator-liferay-js em nível global, executando o seguinte comando: npm install -g generator-liferay-js 2. Após a instalação, dentro do seu "liferay-workspace / modules" ou alguma outra pasta do projeto que você está usando, execute o gerador com: yo liferay-js 3. Escolha o tipo "Pacote compartilhado" e preencha o restante das informações necessárias. 4. Abra src / index.js e adicione após init (): console.log ('common-js-bundle está funcionando como provedor ...');
  • 8. 5. Agora um projeto angular, executando o gerador dentro de seu "liferay-workspace / modules" ou alguma outra pasta de projeto que você está usando. yo liferay-js 6. Escolha o tipo "Widget Angular" e preencha o restante das informações necessárias. 7. Abra o package.json e copie tudo em “dependências”. Como consumir um “Javascript de Biblioteca Compartilhada” com Angular
  • 9. 8. Copie como “dependências” no package.json do módulo “Shared Bundle” criado anteriormente. 9. Dentro do módulo do tipo “Shared Bundle”, execute o seguinte comando para instalar as bibliotecas / dependências adicionadas. npm install 10. De volta ao módulo "Angular Widget", abra o arquivo .npmbundlerrc (abaixo continuaremos com a configuração necessária) a) Exclua todas as dependências declaradas dentro do módulo, o que nos garante que as dependências declaradas no package.json do projeto não serão adicionadas ao construir o .jar, adicionando o seguinte: "exclude":{ "*":true },
  • 10. b. Importe todas as dependências que você precisa consumir do módulo "Pacote Compartilhado". Podemos fazer isso através de "config / import" + o nome do provedor. Deve se parecer mais ou menos com o exemplo abaixo: "config": { "importações": { "common-js-bundle": { "@ angular / animações": "10.2.2" … c. Finalmente, se você deseja acessar index.js de seu provedor (projeto de pacote compartilhado), você só precisa adicioná-lo sem o namespace dentro do "import" "": { "common-js-bundle": "^ 1.0.0" }
  • 11. ● O código final no arquivo .npmbundlerrc será parecido com este:
  • 12. L I F E R A Y Como consumir um Javascript de Biblioteca Compartilhada com React
  • 13. Repositório com exemplo: https://github.com/RoselaineMarquesMontero/liferay-workspace-shar ed-library Mais informações: How to use Shared Library Javascript with React - https://liferay.dev/en/b/how-to-use-shared-library-javascript-with-ang ular-liferay How to use Shared Library Javascript with Angular - https://liferay.dev/en/b/how-to-use-shared-library-javascript-with-rea ct-in-liferay