SlideShare uma empresa Scribd logo
Globalcode – Open4education
JavaScript – Filtrando o TimeZone
com Moment.js
Danilo Raulino de Liz
Desenvolvedor Front-End
Globalcode – Open4education
Danilo Raulino de Liz
danilo.rdliz@gmail.com
https://br.linkedin.com/in/danilo-raulino-de-liz-80007872
https://github.com/daniloliz
Globalcode – Open4education
Globalcode – Open4education
Agenda
Moment.js
Conceito
Funcionamento
Criação de Filtros (Angular.js)
Exemplos
Solução de Caso
Globalcode – Open4education
Globalcode – Open4education
Conceito
Parse, validate, manipulate and display dates in
JavaScript.
Globalcode – Open4education
Globalcode – Open4education
Exemplos
Instalando Moment
Bower – bower install moment --save
Instalando Moment Timezone
Bower – bower install moment-timezone --save
Instalando Angular
Bower – bower install angular --save
Globalcode – Open4education
Funcionamento
Format Dates
Globalcode – Open4education
Funcionamento
Relative Time
Globalcode – Open4education
Funcionamento
Calendar Time
Globalcode – Open4education
Funcionamento
Mutiple Locale Support
Globalcode – Open4education
Funcionamento
Convert Dates Between Timezones
Globalcode – Open4education
$Filter
Globalcode – Open4education
Filtros com Angular
Globalcode – Open4education
Exemplos
Criar um filtro em angular.js
Globalcode – Open4education
Caso...
Vamos imaginar que temos um sistema que vai
atender o agendamento de reuniões a uma equipe
global...
Globalcode – Open4education
TimeZone
http://www.timeanddate.com/time/map/
Globalcode – Open4education
Solução de Caso 1
TimeZone
(Default) TimeZone
(Select)
Globalcode – Open4education
Problemas!
Toda a responsabilidade fica centralizada na
biblioteca moment.js.
Caso uma versão entre com alguma variável que
não seja filtrada com a biblioteca, não vou ferir
apenas o filtro mais sim a regra e a legibilidade do
dado no BD.
Globalcode – Open4education
Solução de Caso 2
BD
(TimeZone Default)
Aplicação Brasil
Aplicação Italia
Aplicação EUA
Globalcode – Open4education
Problemas!
Custo alto do projeto.
Manutenção trabalhosa e repetitiva.
O moment.js ficará centralizado da mesma forma
que o primeiro caso.
Globalcode – Open4education
BD
(TimeZone Default)
Brazil
Itália
EUA
Aplicação
(TimeZone Select)
Solução de Caso 3
Select
Default
Globalcode – Open4education
Problemas!
Todas as datas serão filtradas para mostrar o
TimeZone correto para o cliente e caso essa
prática não seja um padrão dentro da equipe, pode
passar para o cliente uma data com o TimeZone
default.
Para esse caso é interessante a equipe ter uma
boa comunicação interna, assim podendo
minimizar erros de filtragem.
Globalcode – Open4education
Perguntas?
Globalcode – Open4education
Obrigado!

Mais conteúdo relacionado

PDF
Computação Física com Arduino, Program-ME e Java
PDF
Decoupled Drupal com GraphQL e React
PDF
Time zones in JavaScript
PPTX
Date and Time MomentJS Edition
PPTX
That Conference Date and Time
PPTX
Date and Time Odds Ends Oddities
PPTX
It Depends - Database admin for developers - Rev 20151205
PDF
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
Computação Física com Arduino, Program-ME e Java
Decoupled Drupal com GraphQL e React
Time zones in JavaScript
Date and Time MomentJS Edition
That Conference Date and Time
Date and Time Odds Ends Oddities
It Depends - Database admin for developers - Rev 20151205
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.

Semelhante a Filtrando o TimeZone com Moment.js (20)

PDF
Gerando aplicações Spring Boot e AngularJS com gerador de código JHipster
PDF
Implementando aplicativos Web com JSF
PDF
Introducao Spring ROO
PPT
TDC - Técnicas e recursos para desenvolvimento web em cenários de grande escala
PPTX
TDC2017 | São Paulo - Trilha Containers How we figured out we had a SRE team ...
PDF
JSF 2 - Java "Super" Faces
PPTX
Utilizando a API do Roslyn, o novo compilador do C#
PDF
Rails API com GraphQL
PDF
TDC2018SP | Trilha Ruby - Uma Aplicação Ruby On Rails Integrada com GraphQL, ...
PPT
Google AppEngine and JEE
PDF
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
PPTX
TDC2016POA | Trilha Web - Realidade Virtual com WebVR
PDF
TDC SP 2018 - Utilizando BDD para análise de negócio e desenvolvimento de pro...
PDF
Arquiteturas Java EE no Google App Engine
PPTX
Introdução ao Habitat
PPT
Ágil em escala salvando grandes projetos - TDC 2017
PDF
[TDCPOA2018] Desmistificando a eXtreme Programming para desenvolvedores "não ...
PDF
Metralhando sua API
PDF
TDC Floripa 2018 - Metralhando sua API
PPT
Trilha .Net - Programacao funcional usando f#
Gerando aplicações Spring Boot e AngularJS com gerador de código JHipster
Implementando aplicativos Web com JSF
Introducao Spring ROO
TDC - Técnicas e recursos para desenvolvimento web em cenários de grande escala
TDC2017 | São Paulo - Trilha Containers How we figured out we had a SRE team ...
JSF 2 - Java "Super" Faces
Utilizando a API do Roslyn, o novo compilador do C#
Rails API com GraphQL
TDC2018SP | Trilha Ruby - Uma Aplicação Ruby On Rails Integrada com GraphQL, ...
Google AppEngine and JEE
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2016POA | Trilha Web - Realidade Virtual com WebVR
TDC SP 2018 - Utilizando BDD para análise de negócio e desenvolvimento de pro...
Arquiteturas Java EE no Google App Engine
Introdução ao Habitat
Ágil em escala salvando grandes projetos - TDC 2017
[TDCPOA2018] Desmistificando a eXtreme Programming para desenvolvedores "não ...
Metralhando sua API
TDC Floripa 2018 - Metralhando sua API
Trilha .Net - Programacao funcional usando f#
Anúncio

Filtrando o TimeZone com Moment.js