O documento discute o papel dos engenheiros front-end na criação de experiências web ricas e interativas em um contexto global. Ele explora a importância da localização (l10n) e da internacionalização (i18n) para adaptar interfaces a diferentes mercados, enfatizando a necessidade de padronização e reuso em codebases. Além disso, destaca práticas de desenvolvimento colaborativo e eficientes para otimizar o ciclo de desenvolvimento e a manutenção de aplicações em múltiplos locais.

1. Desenvolvimento Front-End emEscala GlobalBerg BrandtFront-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 1Site 2Site 3en-USen-USen-USen-USen-USen-USpt-BRpt-BRpt-BRpt-BRpt-BRpt-BRen-CAen-CAen-CAen-CAen-CAen-CAfr-CAfr-CAfr-CAfr-CAfr-CAfr-CA

5. Do Local...VárioscodebasesDuplicação de esforçosMáximacustomizaçãoecontrolelocalmenteIncompatibilidadeeinconsitênciaAlto custo de produçãoemanutençãoen-USpt-BRen-CAfr-CA

6. ... ao GlobalCore FrameworkSite 1Site 2CodebaseúnicoPadronizaçãoReusoCusto de produçãoemanutençãootimizadosCiclo de desenvolvimentoelançamentomaiseficientesen-USen-USpt-BRpt-BRen-CAen-CAfr-CAfr-CA

7. Do Global ao LocalSite 1 -pt-BRCustomizadoparao marketConteúdorelevantelocalmenteAdaptadoao localeLocal contentLocalizaçãoInternacionalizaçãoCustomização

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

9. ApplicationLocalizaçãoeInternacionalizaçãoLocalização (L10n): adaptação de um sistemapara um certo "locale".Internacionalização (i18n): capacidade de um sistema de suportardiversos "locales".L10n e i18n sãocomplementaresGlobalização: g11n = L10n + i18nen-USpt-BRen-CAfr-CA

10. LocalizaçãoeInternacionalizaçãoO 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úmerosPesos emedidasNúmeros de documentosgovernamentais(CPF, RG, etc.)MoedaEtc...

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

12. PadronizaçãoEstratégiamultidisciplinarProdutoDesignEngenhariaEstratégia de padronização global multidisciplinarDesign Integrity vs. Pixel PerfectNormalização: consistêncianasespecificaçõesDefinição de padrões de código: HTML, CSS, JavaScript, etc..Documentação, colaboraçãoeatualização

13. ModularizaçãoSnippetsSnippetsSnippetsSnippetsModuleModulePageSiteFoco no desenvolvimento de blocosSnippets: hd, bd, ft, Listas, Abas, Dialogs, ButtonsMódulos: Data + HTML + CSS + JSPáginas: agrupamento de módulosSites: agrupamento de páginas

14. ReusoMódulosagnósticospermitindoreusoemdiferentes sitesSnippets intercambiáveis: partes do códigopodem ser reusados de um móduloparaoutroFramework de CSS emcamadas: comum, snippets, modules, site, skin, etcComponentização do JS em YUI3 modules

15. GerenciamentoeIntegração“Tudojuntoemisturado”

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

17. RequestRoutingConfigurationAssemblyResponseDomainPathSiteLanguageRegionUADeviceFlavorPageModulesDataOthersAssetsCaching

18. IntegraçãoSCM: Source Code Management (Subversion)CI (continuous integration): check-ins constantesDesenvolvedoresemdiferenteslocaisefusoshoráriosModelo de desenvolvimentocolaborativobemdefinidoRotina de testes unitários a cadabuildCiclo de releasesmaisrápidos

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

20. Primeiroprojeto de Media no framework global

21. Lançamentoinicialem 5 markets: Brasil, Canadá (inglêsefrancês), ÍndiaeEstadosUnidosPerguntas?

22. Obrigado!Berg Brandtwww.bergbrandt.comblog.bergbrandt.comtwitter.com/bergbrandt