Internationalizing The New York Times

520 views

Published on

Scott Taylor, Sr. Software Engineer, The New York Times
WordCamp US, 2016

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
520
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Internationalizing The New York Times

  1. 1. Internationalizing the (failing) New York Times WordCamp U.S. (Donald J. Trump, President) December 3, 2016
  2. 2. Scott Taylor • Sr. Software Engineer, Web Frameworks
 Formerly Interactive News
 Formerly Blogs
 The (failing) New York Times • WordPress Core Developer
  3. 3. Why did we use WordPress? • WordPress is bootstrapped with i18n • Easy to support l10n by adding translation files • Easy to separate languages using multisite • For new products, helpful to be able to control the front-end and the back-end • Gulp plugins make it easy to generate PO/MO files
  4. 4. Gulp is a streaming build system • Tasks are written in code instead of config (cough: Grunt) • gulp.pipe makes it easy to chain tasks const po = new PO(); po.items = items; po.save(file); gulp.src(file) .pipe(gettext()) .pipe(gulp.dest(dest))
  5. 5. Docker is the world’s leading software containerization platform
  6. 6. Open-source system for automating deployment, scaling, and management of containerized applications.
  7. 7. SNS Amazon Simple Notification Service (Amazon SNS) is a fast, flexible, fully managed push notification service that lets you send individual messages or to fan-out messages to large numbers of recipients
  8. 8. S3 Amazon Simple Storage Service (Amazon S3) is object storage with a simple web service interface to store and retrieve any amount of data from anywhere on the web.
  9. 9. RDS Amazon Relational Database Service (Amazon RDS) makes it easy to set up, operate, and scale a relational database in the cloud.
  10. 10. ElastiCache Amazon ElastiCache is a web service that makes it easy to deploy, operate, and scale an in-memory data store or cache in the cloud.
  11. 11. What is a PHP project?
  12. 12. gulp node_modules vendor wordpress/ wp-content index.php wp-config.php .babelrc .eslintrc.json Dockerfile gulpfile.babel.js
 composer.json composer.lock package.json yarn.lock
  13. 13. <?php require_once( __DIR__ . '/wp-config.php' ); wp(); do_action( 'template_redirect' ); if ( 'HEAD' === $app['request']->getMethod() && apply_filters( 'exit_on_http_head', true ) ) { exit(); } if ( is_robots() ) { do_action( 'do_robots' ); } elseif ( is_feed() ) { do_feed(); } else { do_action( 'nyt_template_render', $app ); }
  14. 14. Composer Package Management for PHP
  15. 15. "prefer-dist": true, "sort-packages": true }, repositories": [ { "type":"composer", "url":"https://wpackagist.org" } ], "require": { "aws/aws-sdk-php": "^3.19", "doctrine/orm": "^2.5", "guzzlehttp/guzzle": "^6.2", "monolog/monolog": "^1.21", "mustache/mustache": "^2.11", "pimple/pimple": "^3.0", "symfony/asset": "^3.1", "symfony/http-foundation": "^3.1", "symfony/validator": "^3.1", "wpackagist-plugin/akismet": "^3.2", "wpackagist-plugin/amp": "^0.3.3", "wpackagist-plugin/debug-bar": "^0.8.4", "wpackagist-plugin/debug-bar-console": "^0.3.0", "wpackagist-plugin/socialflow": "^2.7" }, "prefer-stable": true, "autoload": { "psr-4": { "NYT" : "lib/php", "NYTTheme": "wp-content/themes/shell/php", "NYTBylines" : "wp-content/plugins/nyt-wp-bylines/php", "NYTMedia" : "wp-content/plugins/nyt-wp-media/php" }
  16. 16. // all Composer dependencies are available require( __SRC__ . '/vendor/autoload.php' ); // Load resource in the DI Container $app = new NYTApp(); $app->register( new NYTAppProvider() ); $app->register( new NYTCacheProvider() ); $app->register( new NYTDatabaseProvider() ); $app->register( new NYTSymfonyProvider() ); $app->register( new NYTAWSProvider() ); NYTgetApp( $app );
  17. 17. Mustache } Logic-less templates.
  18. 18. {{< admin/layout }} {{$ content }} <div class="wrap"> <h1> {{ title }} {{# title_link_url }} <a href="{{ . }}" class="page-title-action">{{ l10n.add_new }}</a> {{/ title_link_url }} {{{ search }}} </h1> {{# message }} <div id="message" class="updated notice is-dismissible"> <p>{{{ . }}}</p> </div> {{/ message }} <form id="posts-filter" method="get"> {{{ list_table_views }}} {{{ list_table_display }}} <div id="ajax-response"></div> {{{ find_posts_div }}} </form> </div> {{/ content }} {{/ admin/layout }}
  19. 19. Guzzle Guzzle is a PHP HTTP client that makes it easy to send HTTP requests and trivial to integrate with web services.
  20. 20. Symfony Best-in-class PHP Components
  21. 21. HttpFoundation The component defines an object-oriented layer for the HTTP specification.
  22. 22. Doctrine • Around since 2006 with very stable, high-quality codebase. • Extremely flexible and powerful object-mapping and query features. • Support for both high-level and low-level database programming for all use-cases. • Large Community and integrations with many different frameworks (Symfony, Zend Framework, CodeIgniter, Flow, Lithium, etc)
  23. 23. Pimple A Simple PHP Dependency Injection Container
  24. 24. $app['doctrine.connection'] = function ( $app ) { return new Connection( [ 'host' => $app['db.host'], 'user' => $app['db.user'], 'password' => $app['db.password'], ], $app['doctrine.nyt.driver'], $app['doctrine.config'] ); }; $app['db'] = function ( $app ) { $conn = $app['doctrine.connection']; return EntityManager::create( $conn, $app['doctrine.config'], $conn->getEventManager() ); };
  25. 25. <?php namespace NYTCache; use NYTApp; class ObjectCache implements WPCacheInterface { public function __construct( App $app ) { $this->memcached = $app['memcached']; $this->cache = $app['cache.chain']; $this->arrayCache = $app['cache.array']; $this->tablePrefix = $app['table_prefix']; $this->globalPrefix = is_multisite() ? '' : $this->tablePrefix; $this->sitePrefix = ( is_multisite() ? $app['blog_id'] : $this->tablePrefix ) . ':'; } }
  26. 26. <?php namespace NYTCache; interface WPCacheInterface { public function key( $key, string $group = 'default' ); public function get( $id, string $group = 'default' ); public function set( $id, $data, string $group = 'default', int $expire = 0 ); public function add( $id, $data, string $group = 'default', int $expire = 0 ); public function replace( $id, $data, string $group = 'default', int $expire = 0 ); public function delete( $id, string $group = 'default' ); public function incr( $id, int $n = 1, string $group = 'default' ); public function decr( $id, int $n = 1, string $group = 'default' ); public function flush(); public function close(); public function switch_to_blog( int $blog_id ); public function add_global_groups( $groups ); public function add_non_persistent_groups( $groups ); }
  27. 27. Silex A PHP microframework for PHP. It is built on the shoulders of Symfony and Pimple and also inspired by sinatra.
  28. 28. require_once('vendor/autoload.php'); $app = new SilexApplication(); $app->get('/hello/{name}', function($name) use ($app) { return 'Hello ' . $app->escape($name); }); $app->run();
  29. 29. Hack / HHVM Hack is a programming language for HHVM, both from Facebook.
  30. 30. Features of Hack • Backwards compatibility with PHP • Type annotations catch bugs before runtime. • AsyncIO • Collections
  31. 31. What are Collections? $a = Vector {'a', 'b', 'c'}; $b = Map { 'a' => 888, 'b' => 23, 'f' => 0, }; $c = Set {'A', 'B', 'C'}; Ordered sequence of values Sequence of values keyed to string or int values: Ordered collection of unique values (string or int)
  32. 32. What are Shapes? type Taco = shape( 'id' => string, 'url' => string, 'filling' => string ); $taco = shape( 'id' => '573065673A34Y', 'url' => 'http://tacos.com', 'filling' => 'carnitas' ); function foo(Taco $taco): void { echo $taco['filling']; // ... }
  33. 33. The scope for errors is significantly reduced.
  34. 34. Is WordPress a PHP project?
  35. 35. JavaScript A brave new world
  36. 36. Yarn https://yarnpkg.com/ Improved package manager for JavaScript, from Facebook Install: brew install yarn Examples: yarn add react yarn install yarn upgrade https://code.facebook.com/posts/1840075619545360
  37. 37. Flow A Static Type Checker for JavaScript
  38. 38. React A JavaScript library for building user interfaces
  39. 39. Redux is a predictable state container for JavaScript apps.
  40. 40. Immutable collections for JavaScript
  41. 41. Relay A JavaScript framework for building data-driven React applications
  42. 42. GraphQL A query language for your API
  43. 43. Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file.
  44. 44. Isomorphic Apps
  45. 45. http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
  46. 46. http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
  47. 47. A toolkit that encapsulates and manages the configuration for isomorphic web apps
  48. 48. // @flow import React from 'react'; import styles from './Loading.scss'; const Loading = () => ( <p className={styles.loading}> Loading… </p> ); export default Loading;

×