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.

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
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
34. INTERNATIONALIZATION
35. INTERNATIONALIZATION VISUAL VERIFICATION
36. INTERNATIONALIZATION VISUAL VERIFICATION MULTIPLE ENVIRONMENTS
37. INTERNATIONALIZATION VISUAL VERIFICATION MULTIPLE ENVIRONMENTS PROMOTION / ROLLBACK
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
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 } } }
59. LET’S TALK ABOUT
60. LET’S TALK ABOUT DEVELOPER WORKFLOW
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
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
74. WORKS WITH ANY REGISTRY AND SCOPED MODULES
75. WORKS WITH ANY REGISTRY AND SCOPED MODULES
76. WORKS WITH ANY REGISTRY AND SCOPED MODULES
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