Do not speak Portuguese? Translate this site with Google or Bing Translator
A tecnologia por trás do novo NYTimes.com

Posted on: January 08, 2014 01:01 AM

Posted by: Renato

Categories: Variados

Views: 321

Neoroniodigital

por 

A tecnologia por tras do NYTimes.com(2014)

O jornal New York Times lançou a nova versão do seu website, com uma interface mais moderna e objetiva. Mas a mudança visual é só parte de uma completa reformulação de plataforma digital. Conheça as principais tecnologias utilizadas pelo jornal mais popular dos Estados Unidos.

Backend e CMS

  • A linguagem de programação continua sendo PHP. Foi criado um framework PHP específico para o jornal;
  • Todos os códigos do CMS foram reescritos ou completamente refatorados;
  • A versão anterior de CMS era baseada em páginas estáticas HTML. Isso garantia boa performance, mas limitava alterações de layout (mudanças no template não eram replicadas em páginas antigas, por exemplo);
  • Varnish Cache foi escolhido como servidor de proxy reverso

Front-end

  • O código CSS trabalha com 20 breakpoints (mudanças de layout conforme o tamanho da tela), gerando 100 variações de layout em uma única página de notícia;
  • LESS faz o pré-processamento do CSS;
  • Grunt combina arquivos CSS e gera uma única CSS Sprite, diminuindo o número de requisições HTTP;
  • Uma CDN e cache headers garantem que o usuário baixe menos bytes a cada vez que visita o website;
  • Os banners publicitários são carregados dentro de iFrames. Isso evita o uso de document.write, tornando a renderização da página mais rápida;
  • Diversas bibliotecas Javascript são utilizadas: Backbone.jsRequireJSjQueryModernizrSockJSUnderscore.js e Hammer.jsMocha and Chai fazem os testes automatizados;

Referências

https://www.nytimes.com

- https://github.com/nytimes/backbone.stickit

Data materia 22/01/2014


Brad Stenger para o The New York Times Andre Behrens no Encontro de Desenvolvedores de Aplicativos HTML5

“O que há de tão especial no JavaScript?” Eu fiz a pergunta a Brian Mitchell (Sstrmpnk), o Diretor de Engenharia da Assembleia Geral, um centro empresarial e educacional para a comunidade de tecnologia da cidade de Nova York. “É a linha de frente. É onde a internet está evoluindo”, ele me disse.

(O New York Times é um parceiro de mídia no Start Making da Assembleia Geral, um novo programa de educação em empreendedorismo on-line.)

Mitchell organiza um encontro mensal para desenvolvedores de JavaScript. O grupo, NYC.js, realiza sua reunião no Times Building. As reuniões são anunciadas no blog do grupo, http://nycjavascript.com.

David Nolen, David Nolen, de Brad Stenger, fala ao New York.js sobre o ClojureScript

A reunião de março do NYC.js foi na última terça-feira. Mais de cinquenta desenvolvedores saíram para isso. O apresentador principal foi David Nolen (swannodette), que trabalha no grupo de notícias interativas no The Times. Nolen falou sobre ClojureScript, um novo compilador para a linguagem de programação Clojure que cospe o código JavaScript.

Esta foi a primeira noite de três encontros noturnos consecutivos de JavaScript. Todos os três tinham um desenvolvedor do Times apresentando.

Clojure é uma versão contemporânea da linguagem de programação Lisp de 50 anos. O ClojureScript chegou quando Rich Hickey, @richhickeycriador de Clojure, passou um mês construindo um compilador, ou mais corretamente um transpilador, que pega o código Clojure e produz JavaScript funcional.

Algumas coisas impulsionaram a criação de JavaScripts alternativos e transladistas como o ClojureScript. (A colega de Nolen Times, Jeremy Ashkenas, tem outra conhecida, a CoffeeScript.) O primeiro passo feito pelos criadores de navegadores – Mozilla com o Firefox e o Google com o Chrome – para fazer o JavaScript funcionar rapidamente. Há também um movimento entre os desenvolvedores de JavaScript para pegar essa velocidade de computação e usá-lo para tornar o processo de escrever programas de computador mais expressivo, então, quando você codificar o autor, você pode ver simultaneamente o que o código faz quando é executado. Outra razão para a rápida evolução atual do JavaScript é que pode ser difícil codificar (e sempre foi) – algo que as ferramentas avançadas realmente ajudam.

As origens do JavaScript remontam a mais de 20 anos, apressados em produção nos primeiros navegadores da Internet Netscape Navigator pelo inventor da linguagem, Brendan Eich (BrendanEich). No início, era rico em recursos, mas incompleto. “As características existiam”, diz Mitchell, “mas eram difíceis de encontrar e difíceis de usar”. O que aconteceu desde então é que, com o tempo, “as pessoas melhoraram nas partes difíceis”.

Como os desenvolvedores suavizaram o JavaScript, a Web 2.0. surgiu. Com chamadas de servidor asychronous (Ajax) e frameworks como Prototype e JQuery e o tipo de dados JSON (JavaScript Object Notation), os navegadores da Web podem buscar e postar dados de servidores da Web sem quebrar a experiência do usuário em uma página da Web. Designers e arquitetos on-line começaram a pensar em termos de aplicações em vez de locais.

Isso foi há anos, agora desenvolvedores de JavaScript, como Eich, Nolen e Ashkenas, falam de “JS.next”, um JavaScript feito de apenas boas partes. E como comunidade, eles reconhecem que os novos transpiladores, como ClojureScript e CoffeeScript, são uma boa maneira de experimentar seu caminho para melhorias.

Como prova, o final da apresentação de Nolen foi sua solução direta para um problema lógico complexo (algo sobre casas, franceses e uma zebra) onde o espaço da solução estava na casa de centenas de milhares de possibilidades. Usando ClojureScript, a resposta computada do navegador apareceu em pouco mais de 50 milissegundos.

Brad Stenger para os desenvolvedores do The New York Times para o HTML5 Application Developers Meetup em 28 de março.

Na noite seguinte, Andre Behrens (mrandre) conversou com mais 60 desenvolvedores no encontro de desenvolvedores de aplicativos HTML5, realizado nos escritórios do SoHo da ZocDoc. Behrens é Engenheiro Sênior de Produto no The Times e a pessoa que construiu o Times Skimmer.

Onde Nolen foi minucioso e técnico, Behrens foi para o inspirador. “Minha palestra é intitulada ‘Dream Bigger’ e eu aviso: estou tentando ser ousado”, começou ele. “Eu não estou aqui para dar um how-to em qualquer tecnologia HTML5. Há tanta documentação que estamos nos afogando em documentação. Não há limite para onde você pode encontrar coisas sobre como você pode usar o armazenamento local ou o WebSQL, ou ter um debate sobre se deve usar o WebSQL, um ponto atual da contenção JavaScript.

O que preocupa Behrens é que os aplicativos, em alguns casos, se tornem plataformas. E em um mundo onde as pessoas gravitam para onde o material legal está, Apple e Electronic Arts e Facebook e Google tiraram os usuários da Web pública e para espaços digitais privados e em rede – iPads, Madden, Facebook, Android.

"Acho que perdemos essa rodada", disse ele. “Não é como se a Web estivesse morta ou estivesse em apuros. A Web é o Windows. Está lá. Isso é dado como certo.”

Boas notícias, porém, dias melhores estão à frente, provavelmente. Eventualmente, as pessoas vão se cansar das coisas que agora capturam sua atenção, de acordo com Behrens. E, “HTML5 é insanamente fácil de pegar. As pessoas que desenvolveram HTML5 são outros desenvolvedores que estavam lá, e eles sabem o quanto isso doeu da última vez. Eles sabem o quanto era difícil fazer coisas novas. Eles tornaram isso fácil de fazer. Eles tornaram isso fácil de implementar. Eles tornaram fácil testar.”

“Acho que estamos em um ciclo de desafios agora”, e o desafio é ir além de recuperar o trabalho, recriando experiências fora da Web nos navegadores. “Precisamos construir as coisas que as pessoas não podem imaginar”, disse ele, então fechou com: “Quando essa ideia maluca você diz a si mesmo: ‘Isso nunca poderia funcionar’. “Nós nunca poderíamos fazer isso acontecer.” “Nós nunca poderíamos fazer essa escala.” Se for incrível, dedique-se a fazer isso acontecer. Porque isso pode ser feito.”

Perguntas do público vieram e foram rapidamente. Behrens tinha a intenção de provocar a multidão de desenvolvedores, mas ele falhou. Em vez disso, ele os espreitou.

Brad Stenger para The New York Times Jeremy Ashkenas, criador do Backbone.js, fala sobre a biblioteca de JavaScript no primeiro Meetup Backbone.js em 29 de março

O maior dos três encontros de Javascript em três noites foi na quinta-feira, o primeiro encontro do NYC Backbone.js hospedado no escritório compartilhado de três empresas iniciantes no centro da cidade - Ordr.in, Dispatch, ChatID. Duzentos desenvolvedores se aglomeraram para um evento encabeçado por Jeremy Ashkenas (Jashkenas) um desenvolvedor do grupo Interactive News no The New York Times, que também é a força orientadora por trás do Backbone.js.

(“Ashkenas, ele é um monstro”, foi a descrição do organizador do encontro HTML5, Dominic Denicola. Denicola, Omenicdenicola, é um desenvolvedor Nook para Barnes e Noble e, como eu, ele participou de todos os três meetups de Javascript.)

O Backbone.js faz parte de uma ideia maluca que os jornalistas tinham para a Web-ificação do processo de lidar com documentos eletrônicos (muitas vezes em formatos de arquivo PDF difíceis) para relatórios investigativos, um projeto que atende pela DocumentCloud. Começou em 2009 com financiamento da Fundação Knight. Depois de começar como uma organização independente sem fins lucrativos, a DocumentCloud tornou-se um projeto de Repórteres e Editores Investigativos em junho de 2011. E desde o início tem sido software Open Source, muitos dos quais existem, como Backbone, como bibliotecas de software de softwares viáveis, independentes e compartilhadas.

Ashkenas foi desenvolvedor principal para DocumentCloud de 2009 a 2011. Todos os exemplos de apresentação usados para sua conversa de encontro foram do projeto. “A ideia com a DocumentCloud é tornar mais fácil para os repórteres trazerem seus documentos de fonte primária, analisá-los e anotá-los e, em seguida, incorporá-los ao lado de suas reportagens”, disse ele.

Os participantes eram uma mistura de desenvolvedores que usavam Backbone e queriam ouvir sobre suas porcas e parafusos, e outros desenvolvedores não-usuários que buscavam informações para começar a usá-lo. “Quando você cria um grande aplicativo Javascript, muitas vezes o que você está fazendo é trabalhar com uma grande API JSON. Você está adicionando uma grande bolha de dados JSON ao topo da sua página (html). Esses dados estão intimamente ligados à organização e ao design da página.

Isso é um problema. “Se você contratar um designer e quiser fazer uma nova interface de usuário (interface de usuário), você está em grande problema Javascript-wise. Toda a sua lógica de negócios é tecida em preocupações com a interface do usuário”, disse Ashkenas. O Backbone resolve o problema mantendo o controle do estado de IU de uma maneira que é reutilizável e independente da interface do usuário.

Nem tudo requer o que o Backbone oferece. “Muitas vezes, uma página regular da Web estaria bem”, disse Ashkenas. “Torna-se realmente útil quando você tem um aplicativo onde você tem um usuário que não está necessariamente editando, mas que está pelo menos manipulando, classificando e usando os dados”, e onde essas alterações são tratadas de forma confiável e universal sem nunca sair da página da Web.

Mitchell, o engenheiro da Assembleia Geral, explicou por que fazia sentido que todas essas coisas de Javascript vinham do The New York Times. Há tanta coisa acontecendo agora com a experiência de ler as notícias em uma tela, ele me disse: “O que é renderizado nunca precisa ser estático”.

De acordo com Mitchell, se for bem projetado, a versão mais recente de um artigo de notícias muda a experiência apenas o suficiente para que as pessoas se apeguem mais à coisa nova e menos ligadas ao que veio antes: “Há pessoas que olham para jornais e não as recebem mais”.


4

Share

Donate to Site


About Author

Renato

Developer

Add a Comment
Comments 0 Comments

No comments yet! Be the first to comment

Blog Search


Categories

OUTROS (16) Variados (109) PHP (133) Laravel (171) Black Hat (3) front-end (29) linux (114) postgresql (39) Docker (28) rest (5) soap (1) webservice (6) October (1) CMS (2) node (7) backend (13) ubuntu (56) devops (25) nodejs (5) npm (3) nvm (1) git (8) firefox (1) react (7) reactnative (5) collections (1) javascript (7) reactjs (8) yarn (0) adb (1) Solid (2) blade (3) models (1) controllers (0) log (1) html (2) hardware (3) aws (14) Transcribe (2) transcription (1) google (4) ibm (1) nuance (1) PHP Swoole (5) mysql (31) macox (4) flutter (1) symfony (1) cor (1) colors (2) homeOffice (2) jobs (3) imagick (2) ec2 (1) sw (1) websocket (2) markdown (1) ckeditor (1) tecnologia (14) faceapp (1) eloquent (14) query (4) sql (40) ddd (3) nginx (9) apache (4) certbot (1) lets-encrypt (3) debian (12) liquid (1) magento (2) ruby (1) LETSENCRYPT (1) Fibonacci (1) wine (1) transaction (1) pendrive (1) boot (1) usb (1) prf (1) policia (2) federal (1) lucena (1) mongodb (4) paypal (1) payment (1) zend (1) vim (4) ciencia (6) js (1) nosql (1) java (1) JasperReports (1) phpjasper (1) covid19 (1) saude (1) athena (1) cinnamon (1) phpunit (2) binaural (1) mysqli (3) database (42) windows (6) vala (1) json (2) oracle (1) mariadb (4) dev (12) webdev (24) s3 (4) storage (1) kitematic (1) gnome (2) web (2) intel (3) piada (1) cron (2) dba (18) lumen (1) ffmpeg (2) android (2) aplicativo (1) fedora (2) shell (4) bash (3) script (3) lider (1) htm (1) csv (1) dropbox (1) db (3) combustivel (2) haru (1) presenter (1) gasolina (1) MeioAmbiente (1) Grunt (1) biologia (1) programming (22) performance (3) brain (1) smartphones (1) telefonia (1) privacidade (1) opensource (3) microg (1) iode (1) ssh (3) zsh (2) terminal (3) dracula (1) spaceship (1) mac (2) idiomas (1) laptop (2) developer (37) api (5) data (1) matematica (1) seguranca (2) 100DaysOfCode (9) hotfix (1) documentation (1) laravelphp (10) RabbitMQ (3) Elasticsearch (1) redis (2) Raspberry (4) Padrao de design (4) JQuery (1) angularjs (4) Dicas (43) Kubernetes (3) vscode (2) backup (1) angular (3) servers (2) pipelines (1) AppSec (1) DevSecOps (4) rust (1) RustLang (1) Mozilla (1) algoritimo (1) sqlite (1) Passport (2) jwt (5) security (2) translate (1) kube (2) iot (1) politica (2) bolsonaro (1) flow (1) podcast (1) Brasil (1) containers (3) traefik (1) networking (1) host (1) POO (2) microservices (2) bug (1) cqrs (1) arquitetura (3) Architecture (4) sail (3) militar (1) artigo (1) economia (1) forcas armadas (1) ffaa (1) autenticacao (2) autorizacao (2) authentication (4) authorization (3) NoCookies (1) wsl (4) memcached (1) macos (2) unix (2) kali-linux (1) linux-tools (5) apple (1) noticias (2) composer (1) rancher (1) k8s (1) escopos (1) orm (1) jenkins (4) github (5) gitlab (3) queue (1) Passwordless (1) sonarqube (1) phpswoole (1) laraveloctane (1) Swoole (1) Swoole (1) octane (1) Structurizr (1) Diagramas (1) c4 (1) c4-models (1) compactar (1) compression (1) messaging (1) restfull (1) eventdrive (1) services (1) http (1) Monolith (1) microservice (1) historia (1) educacao (1) cavalotroia (1) OOD (0) odd (1) chatgpt (1) openai (3) vicuna (1) llama (1) gpt (1) transformers (1) pytorch (1) tensorflow (1) akitando (1) ia (1) nvidia (1) agi (1) guard (1) multiple_authen (2) rpi (1) auth (1) auth (1) livros (2) ElonMusk (2) Oh My Zsh (1) Manjaro (1) BigLinux (2) ArchLinux (1) Migration (1) Error (1) Monitor (1) Filament (1) LaravelFilament (1) replication (1) phpfpm (1) cache (1) vpn (1) l2tp (1) zorin-os (1) optimization (1) scheduling (1) monitoring (2) linkedin (1) community (1) inteligencia-artificial (2) wsl2 (1) maps (1) API_KEY_GOOGLE_MAPS (1) repmgr (1) altadisponibilidade (1) banco (1) modelagemdedados (1) inteligenciadedados (4) governancadedados (1) bancodedados (2) Observability (1) picpay (1) ecommerce (1) Curisidades (1) Samurai (1) KubeCon (1) GitOps (1) Axios (1) Fetch (1) Deepin (1) vue (4) nuxt (1) PKCE (1) Oauth2 (2) webhook (1) TypeScript (1) tailwind (1) gource (2)

New Articles



Get Latest Updates by Email