Serverless Front-End Deployments using npm

Serverless Front-End Deployments using npm

What are serverless front-end deployments? How can you and your team make them a reality using the new Warehouse.ai? Presented at Node.js Interactive North America 2016.

D43e8ea63b61e7669ded5b9d3c2e980f?s=128

Charlie Robbins

November 30, 2016
Tweet

Transcript

  1. SERVERless FRONT-end DEPLOYMENTS using npm

  2. WHY, HELLO THERE

  3. @INDEXZERO GITHUB TWITTER

  4. UX PLATFORM ENG. DIRECTOR BOARD MEMBER, NODE.JS FOUNDATION FORMERLY FOUNDER

    at NODEJITSU
  5. WHAT ARE

  6. SERVERLESS FRONT- END DEPLOYMENTS? WHAT ARE

  7. SERVERLESS FRONT- END DEPLOYMENTS? DEPLOYMENTS? WHAT ARE

  8. None
  9. THE ACT OF SERVING

  10. NEW FUNCTIONALITY THE ACT OF SERVING TO VISITORS

  11. I TYPICAL FRONT-ENDS

  12. I TYPICAL FRONT-ENDS DEVELOPERS WRITE CODE ASSETS CO-LOCATED ON SERVERS

    SERVED TO APP USERS / VISITORS
  13. app.use(express.static(‘public’)); YOUR NODE.JS APP <script src=‘/js/app.min.js’></script> YOUR INDEX.HTML

  14. app.use(express.static(‘public’)); YOUR NODE.JS APP <script src=‘/js/app.min.js’></script> YOUR INDEX.HTML ANY FRONT-END

    CHANGE REQUIRES A SERVER CHANGE
  15. THIS MAKES

  16. THIS MAKES USING A CDN IMPERATIVE

  17. app.use(express.static(‘public’)); YOUR NODE.JS APP <script src=‘/js/app.min.js’></script> YOUR INDEX.HTML

  18. app.use(express.static(‘public’)); YOUR NODE.JS APP <script src=‘/js/app.min.js’></script> YOUR INDEX.HTML <script src=‘https://yourcdn.com/app.min.js’></script>

  19. app.use(express.static(‘public’)); YOUR NODE.JS APP <script src=‘/js/app.min.js’></script> YOUR INDEX.HTML ANY FRONT-END

    CHANGE STILL REQUIRES <script src=‘https://yourcdn.com/app.min.js’></script> A SERVER CHANGE
  20. UNVERSIONED THE ASSET IS

  21. UNVERSIONED THE ASSET IS <script src=‘https://yourcdn.com/app.min.js’></script> NO UNIQUE VERSION <script

    src=‘https://yourcdn.com/1.2.3/app.min.js’></script> UNIQUE VERSION – SEMVER
  22. UNVERSIONED THE ASSET IS <script src=‘https://yourcdn.com/app.min.js’></script> NO UNIQUE VERSION <script

    src=‘https://yourcdn.com/1.2.3/app.min.js’></script> UNIQUE VERSION – SEMVER <script src=‘https://yourcdn.com/a023ffe/app.min.js’></script> UNIQUE VERSION – ASSET SHA
  23. SERVERLESS DEPLOYMENTS? HOW TO APPROACH

  24. SERVERLESS DEPLOYMENTS? HOW TO APPROACH DEVELOPERS WRITE CODE ASSETS SERVERS

    GETS NEW VERSION NEW ASSETS TO APP USERS / VISITORS PUSHED TO CDN
  25. SERVERLESS DEPLOYMENTS? HOW TO APPROACH DEVELOPERS WRITE CODE ASSETS SERVERS

    GETS NEW VERSION NEW ASSETS TO APP USERS / VISITORS PUSHED TO CDN HOW DOES THE SERVER RECEIVE NEW VERSIONS?
  26. SCIENCE CAT SAYS “GOOD QUESTION”

  27. SCIENCE CAT SAYS “GOOD QUESTION” <script src=‘https://yourcdn.com/a023ffe/app.min.js’></script> HOW DOES YOUR

    APP KNOW TO SERVE THIS?
  28. SCIENCE CAT SAYS “GOOD QUESTION” <script src=‘https://yourcdn.com/a023ffe/app.min.js’></script> HOW DOES YOUR

    APP KNOW TO SERVE THIS? <script src=‘https://yourcdn.com/b347aa0/app.min.js’></script> INSTEAD OF THIS?
  29. SCIENCE CAT SAYS “GOOD QUESTION” <script src=‘https://yourcdn.com/a023ffe/app.min.js’></script> HOW DOES YOUR

    APP KNOW TO SERVE THIS? <script src=‘https://yourcdn.com/b347aa0/app.min.js’></script> INSTEAD OF THIS? <script src=‘https://yourcdn.com/ff03598/app.min.js’></script> OR PERHAPS THIS?
  30. NEED BACKGROUND

  31. NEED BACKGROUND YOU MUST KNOW FIRST

  32. NEED BACKGROUND WHAT PRODUCTION MEANS YOU MUST KNOW FIRST

  33. None
  34. INTERNATIONALIZATION

  35. INTERNATIONALIZATION VISUAL VERIFICATION

  36. INTERNATIONALIZATION VISUAL VERIFICATION MULTIPLE ENVIRONMENTS

  37. INTERNATIONALIZATION VISUAL VERIFICATION MULTIPLE ENVIRONMENTS PROMOTION / ROLLBACK

  38. None
  39. SERVER-LESS FRONT-END DEPLOYMENTS REQUIRES AN EXTERNAL SERVICE KNOWING WHAT VERSION(S)

    SHOULD BE RUNNING IN WHAT ENVIRONMENTS FOR ANY OR ALL LOCALES
  40. GOT IT? Great! SERVER-LESS FRONT-END DEPLOYMENTS REQUIRES AN EXTERNAL SERVICE

    KNOWING WHAT VERSION(S) SHOULD BE RUNNING IN WHAT ENVIRONMENTS FOR ANY OR ALL LOCALES
  41. NEED BACKGROUND EXCUSE ME … I … I …

  42. NEED BACKGROUND EXCUSE ME … I … I … ABOUT

    NPM I WAS TOLD THIS TALK WAS
  43. LET’S EXPLORE THE NPM WIRE API

  44. NPM-REGISTRY-COUCHAPP

  45. NPM-REGISTRY-COUCHAPP “THIS THING I HACKED TOGETHER IN A WEEKEND” –

    @mikeal
  46. REWRITES

  47. REWRITES

  48. NPM WIRE API NPM-REGISTRY-COUCHAPP IS STILL THE BEST DOCUMENTATION OF

    THE
  49. NPM WIRE API NPM-REGISTRY-COUCHAPP IS STILL THE BEST DOCUMENTATION OF

    THE TRY IT YOURSELF NPM C SET LOGLLEVEL INFO
  50. GET /:PKG npm view <pkg>

  51. GET /:PKG/:VERSION npm view <pkg>@<version>

  52. GET /:PKG/-/:ATT npm pack <pkg>

  53. PUT /-/PACKAGE/:PKG/DIST-TAGS/:TAG npm dist-tag add <pkg>@<version> <tag>

  54. PUT /:PKG npm publish

  55. None
  56. NPM PUBLISH PAYLOAD npm install registry-mock -g registry-echo

  57. { _id: 'test-publish03', name: 'test-publish03', description: 'Just a test', 'dist-tags':

    { latest: '1.0.0' }, versions: { '1.0.0': { name: 'test-publish03', version: '1.0.0', description: 'Just a test', main: 'index.js', scripts: [Object], author: '', license: 'ISC', readme: 'ERROR: No README data found!’, gitHead: 'c3a43b57be250d6debeeedefff150add7cc0c184' _id: 'test-publish03@1.0.0', _shasum: '6e78734fff0347a9596abb5d3b0360fda6f1a899', _from: '.', _npmVersion: '3.7.1', _nodeVersion: '4.2.2', _npmUser: [Object], maintainers: [Object], dist: [Object] } }, readme: 'ERROR: No README data found!', maintainers: [ { name: 'garbage!!user', email: 'anyvalid@email.com' } ], _attachments: { 'test-publish03-1.0.0.tgz': { content_type: 'application/octet-stream', data: '{{BIG-BASE64-TARBALL}}', length: 568 } } }
  58. None
  59. LET’S TALK ABOUT

  60. LET’S TALK ABOUT DEVELOPER WORKFLOW

  61. None
  62. TRIGGER A NEW BUILD PROMOTE A BUILD TO ENV ROLLBACK

    A BUILD IN ENV LIST BUILDS ACROSS ENVS
  63. TRIGGER A NEW BUILD PROMOTE A BUILD TO ENV ROLLBACK

    A BUILD IN ENV LIST BUILDS ACROSS ENVS NPM PUBLISH
  64. TRIGGER A NEW BUILD PROMOTE A BUILD TO ENV ROLLBACK

    A BUILD IN ENV LIST BUILDS ACROSS ENVS NPM PUBLISH NPM DIST-TAG ADD NPM DIST-TAG ADD
  65. TRIGGER A NEW BUILD PROMOTE A BUILD TO ENV ROLLBACK

    A BUILD IN ENV LIST BUILDS ACROSS ENVS NPM PUBLISH NPM DIST-TAG ADD NPM DIST-TAG ADD NPM DIST-TAG LS
  66. None
  67. WAREHOUSE.AI ENABLES

  68. WAREHOUSE.AI ENABLES SERVERLESS-DEPLOYS OF YOUR

  69. WAREHOUSE.AI ENABLES SERVERLESS-DEPLOYS OF YOUR FRONT-END CODE BY PROVIDING

  70. WAREHOUSE.AI ENABLES SERVERLESS-DEPLOYS OF YOUR FRONT-END CODE BY PROVIDING AUTOMATED

    BUILDS PUSHED TO ANY
  71. WAREHOUSE.AI ENABLES SERVERLESS-DEPLOYS OF YOUR FRONT-END CODE BY PROVIDING AUTOMATED

    BUILDS PUSHED TO ANY S3-COMPATIBLE CDN THROUGH A SIMPLE
  72. WAREHOUSE.AI ENABLES SERVERLESS-DEPLOYS OF YOUR FRONT-END CODE BY PROVIDING AUTOMATED

    BUILDS PUSHED TO ANY S3-COMPATIBLE CDN THROUGH A SIMPLE NPM-BASED WORKFLOW
  73. None
  74. WORKS WITH ANY REGISTRY AND SCOPED MODULES

  75. WORKS WITH ANY REGISTRY AND SCOPED MODULES

  76. WORKS WITH ANY REGISTRY AND SCOPED MODULES

  77. None
  78. TRY IT OUT!

  79. TRY IT OUT! GITHUB.COM/GODADDY/WAREHOUSE.AI GITHUB.COM/GODADDY/CARPENTERD

  80. MAY THE SOURCE BE WITH YOU THANKS. Q&A TIME.

  81. MAY THE SOURCE BE WITH YOU {github, twitter}.com/indexzero crobbins@godaddy.com THANKS.

    Q&A TIME.
  82. MAY THE SOURCE BE WITH YOU {github, twitter}.com/indexzero crobbins@godaddy.com THANKS.

    Q&A TIME. GITHUB.COM/GODADDY/WAREHOUSE.AI GITHUB.COM/GODADDY/CARPENTERD