Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Reusability is the goal


Published on

Starting a new JavaScript project can be complicated. There are many questions that need to be answered before you write a single line of code. What framework do you use? How will you compile the app? Should you use TypeScript or not? How will users authenticate? These are just a few of the time-consuming issues that need to be addressed with each new project you undertake. In this session, Red Pill Now co-founder, Keith Strickland will explore how Red Pill Now has decreased project startup time from about a week, to just a few minutes, by creating reusable project elements. You will learn the tools, processes and elements needed to accomplish this task, leaving you with new ideas on how to shorten your startup time, and reduce the amount of boilerplate required to implement your own solutions.

presented at Engage 2018

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Reusability is the goal

  1. 1. Reusability is the Goal Keith Strickland JavaScript Guru – Red Pill Now The New Chapter Begins #domino2025
  2. 2. Keith Strickland JavaScript Guru
  3. 3. Atwood’s Law “Any application that can be written in JavaScript, will eventually be written in JavaScript” Jeff Atwood - July 2007
  4. 4. Domino Rocks JavaScript Domino PortfolioTheme – April 2018
  5. 5. Why Javascript?
  6. 6. a new version each year (around June)
  7. 7. Great Eco System
  8. 8. It’s Performant
  9. 9. It’s Cool
  10. 10. JavaScript is everywhere Server Mobile Desktop+ Browser
  11. 11. What the heck is Vanilla-JS?
  12. 12. what features are driving today’s techniques?
  13. 13. what is NPM? (Other than a color clash with Notes yellow)
  14. 14. and what is a node module?
  15. 15. NPM Growth comparatively speaking… Bower (JS) Maven Central (Java) npm (node.js) nuget (.NET) Data from ModuleCounts:
  16. 16. using JavaScript in 2010
  17. 17. Browse the web Download some js file Add to project Didn’t work Read the docs Change the order of script tags Didn’t work Read the docs FixTypo Didn’t work Fix wrong Query Selector Didn’t work Read the docs Download missing dependency Didn’t work Change order of script tags Didn’t work Repeat
  18. 18. Using JavaScript in 2010
  19. 19. Using JavaScript Today • npm install <packageName> • import * as <someModule> from “<packageName>”; or const someModule = require(“<packageName>”); • Bower is also available: bower install <packageName> <script src=“bower_components/<package>/<packageName.js>”> • “npm WARN deprecated bower@1.8.2: ... psst! While Bower is maintained, we recommend yarn and webpack for new front-end projects! Please read our blog for more.”
  20. 20. Using JavaScript Today
  21. 21. How does TypeScript fit into all this?
  22. 22. Why is NPM important?
  23. 23. Starter Kits
  24. 24. What do we expect from a starter kit?
  25. 25. Project Setup determination • Which editor are you going to use? • Which Plugins? • Use built-in terminal or not? • Editor configuration? • Tabs or Spaces? • Which Package Manager will you use? • Which JavaScript framework will you use (Angular, Polymer, Ember, Vue, React, etc., etc., etc.)? • Will you use TypeScript? • If so, how will you handle compilation? • Which Task Manager will you use? • NPM, Grunt, Gulp, something else? • Which Plugins? • How will your project be structured (i.e. directory structure, namespace, utility class location, etc.) • How will you handle pub-sub? • How will you manage the application’s context? • Redux? • Custom Solution? • Both • How will the application be compiled? • Which language? • Use experimental features? • Which plugins? • Which linter? • Which rules? • Which rules return an error? Which rules return a warnings? • Use a Preset? Which Preset? • Which Bundler will you use? • Which testing framework will you use? • Assertion Library • Helpers • Test file location • Naming convention • Fake-Server • Mock data generation • Which HTML Templating framework will be used? • How will code be built for production? • Single bundle or split? • Include Source maps? Inline or separate files? • What is used for minification? • What will be the path? • How will the cache be busted? • How will code be built for development environment? • Which local server? • Where will files be served from? • How will compilation be triggered? • How will code be deployed? • How will Internationalization/Localization be implemented? • Which Task Manager will you use? • Grunt • Gulp • Node.js • Something else
  26. 26. Will you remember to ask all of these questions for each project?
  27. 27. File -> New Project
  28. 28. what if I told you…
  29. 29. what if your opinions change?
  30. 30. how do we do this? red-pill-zion
  31. 31. how do we use red-pill-zion?
  32. 32. taking things for granted…
  33. 33. reusable web components
  34. 34. what is a web component?
  35. 35. Web Components Standard
  36. 36. HTML Imports
  37. 37. HTMLTemplates
  38. 38. Custom Elements v1
  39. 39. Shadow DOM v1
  40. 40. Polymer
  41. 41. Component Library
  42. 42. Does Red Pill Now have any OpenSource Web Components?
  43. 43. Thank You for Attending! Questions and Answers