Post on 16-Apr-2017
transcript
Globalcode – Open4education
JavaScript – Filtrando o TimeZone com Moment.js
Danilo Raulino de LizDesenvolvedor 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.jsConceitoFuncionamento
Criação de Filtros (Angular.js)ExemplosSolução de Caso
Globalcode – Open4education
Globalcode – Open4education
Conceito
Parse, validate, manipulate and display dates in JavaScript.
Globalcode – Open4education
Globalcode – Open4education
Exemplos
Instalando MomentBower – bower install moment --save
Instalando Moment TimezoneBower – bower install moment-timezone --save
Instalando AngularBower – 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...
BrasilItáliaEUA
França
Sistema
TimeZone (Brasil)
TimeZone (França)
TimeZone (EUA)
TimeZone (Itália)
Globalcode – Open4education
TimeZone
http://www.timeanddate.com/time/map/
Globalcode – Open4education
Solução de Caso 1
TimeZone(Default) TimeZone
(Select)
MOMENT.JS
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)
MOMENT.JS
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!