Um olhar sobre o desenvolvimento de projetos globalizados sob a perspectiva do Desenvolvedor Front-End: Como criar, manter e reusar um código-base em escala global capaz de atender as necessidades de customização dos mercados locais.

1. Desenvolvimento Front-End emEscala Global Berg Brandt Front-End Engineer - Yahoo!

2. PrefácioQualopapel do Front-End Engineer? “…éoprofissionalcapaz de exploraro front-end de umaaplicação web nãosócomo layout, mascomo interface móvel, mutante, interativa, proporcionando, assim, umaexperiência de usomaisrica…”

3. IntroduçãoDo Local ao Global,do Global ao Local “Diversidade”

4. Site 2 (Partner) Site 3 (Partner) Site 1 (Partner) Site 1 Site 2 Site 3 en-US en-US en-US en-US en-US en-US pt-BR pt-BR pt-BR pt-BR pt-BR pt-BR en-CA en-CA en-CA en-CA en-CA en-CA fr-CA fr-CA fr-CA fr-CA fr-CA fr-CA

5. Do Local... Várioscodebases Duplicação de esforços Máximacustomizaçãoecontrolelocalmente Incompatibilidadeeinconsitência Alto custo de produçãoemanutenção en-US pt-BR en-CA fr-CA

6. ... ao Global Core Framework Site 1 Site 2 Codebaseúnico Padronização Reuso Custo de produçãoemanutençãootimizados Ciclo de desenvolvimentoelançamentomaiseficientes en-US en-US pt-BR pt-BR en-CA en-CA fr-CA fr-CA

7. Do Global ao Local Site 1 -pt-BR Customizadoparao market Conteúdorelevantelocalmente Adaptadoao locale Local content Localização Internacionalização Customização

8. LocalizaçãoeInternacionalização “Fight Mojibake”

9. Application LocalizaçãoeInternacionalização Localização (L10n): adaptação de um sistemapara um certo "locale". Internacionalização (i18n): capacidade de um sistema de suportardiversos "locales". L10n e i18n sãocomplementares Globalização: g11n = L10n + i18n en-US pt-BR en-CA fr-CA

10. LocalizaçãoeInternacionalização O processo de g11n podeincluir: língua: incluindo "character enconding" e "direction" (LTR e RTL). Formato de data e tempo: incluindodiferentescalendáriosefusoshorários. Formatações dos números Pesos emedidas Números de documentosgovernamentais(CPF, RG, etc.) Moeda Etc...

11. Padronização, ModularizaçãoeReuso “Nãoresolvaomesmoproblema de formasdiferentes”

12. Padronização Estratégia multidisciplinar Produto Design Engenharia Estratégia de padronização global multidisciplinar Design Integrity vs. Pixel Perfect Normalização: consistêncianasespecificações Definição de padrões de código: HTML, CSS, JavaScript, etc.. Documentação, colaboraçãoeatualização

13. Modularização Snippets Snippets Snippets Snippets Module Module Page Site Foco no desenvolvimento de blocos Snippets: hd, bd, ft, Listas, Abas, Dialogs, Buttons Módulos: Data + HTML + CSS + JS Páginas: agrupamento de módulos Sites: agrupamento de páginas

14. Reuso Módulosagnósticospermitindoreusoemdiferentes sites Snippets intercambiáveis: partes do códigopodem ser reusados de um móduloparaoutro Framework de CSS emcamadas: comum, snippets, modules, site, skin, etc Componentização do JS em YUI3 modules

15. GerenciamentoeIntegração “Tudojuntoemisturado”

16. Gerenciamento Plataformaúnicaparaservirdiferentesexperiências: RoutingeDevice Detection Search Engine Optimization (SEO) Configuração: site, language, region, etc. Assembly (Montagem): páginas, módulos, data, etc. Assets: Imagens ,CSS, JavaScript Cache e performance

17. Request Routing Configuration Assembly Response Domain Path Site Language Region UA Device Flavor Page Modules Data Others Assets Caching

18. Integração SCM: Source Code Management (Subversion) CI (continuous integration): check-ins constantes Desenvolvedoresemdiferenteslocaisefusoshorários Modelo de desenvolvimentocolaborativobemdefinido Rotina de testes unitários a cadabuild Ciclo de releasesmaisrápidos

19. PrólogoYahoo! News “Change occurs because there’s a gap between what is and what should be” (Craig McCaw)

22. Obrigado! Berg Brandt www.bergbrandt.com blog.bergbrandt.com twitter.com/bergbrandt