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.

Product Camp Silicon Valley 2018 - PM Technical Skills


Published on

You are excited to be PM and want to lead web or mobile engineering team? However, you are unsure about differences in React and React Native, what is JSX, Babel, ES2018, module manager, NPM registry, Gulp, Webpack, JWT and essentially why web security matters. This session will introduce and explain key terms so that you can have strong working relationship with engineers and bring the team onboard with your vision.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Product Camp Silicon Valley 2018 - PM Technical Skills

  1. 1. @adwankar
  2. 2. Why PM need technical skills? • Engaged Customer Interactions • Strong working relationship with engineers • Intuition on how long engineering work will take
  3. 3. Stack Overflow Survey – 100K developers Stack Overflow Developer Survey 2018
  4. 4. Developer Role Stack Overflow Developer Survey 2018
  5. 5. Most Popular Technologies Stack Overflow Developer Survey 2018
  6. 6. Most Popular Framework, Library Stack Overflow Developer Survey 2018
  7. 7. Most Popular Databases Stack Overflow Developer Survey 2018
  8. 8. Most Popular Development Environments Stack Overflow Developer Survey 2018
  9. 9. Version Control Stack Overflow Developer Survey 2018
  10. 10. Correlated Technologies Stack Overflow Developer Survey 2018
  11. 11. What Developers Hope to be doing in 5 years Stack Overflow Developer Survey 2018
  12. 12. State of JavaScript Survey 2017
  13. 13. JavaScript Flavors State of JS 2017
  14. 14. What is ES2018, ES2017, ES6? • Latest version of JavaScript from ECMA Standards group • Many new developer language features added • Not yet supported by all Browsers • Code needs to be Transpiled/Converted to ES5
  15. 15. Typescript • Written by Microsoft • Adds typed variables to language (var x:string) • Adds various object oriented concepts to language • Used with Angular • Needs to be transpiled
  16. 16. Front End Frameworks State of JS 2017
  17. 17. Angular • Written by Google • Angular 1.x Known as AngularJS • Angular 5.x – 2.x Known simply as Angular Written with TypeScript • Many application capabilities (data, layout, components) handled by other libraries
  18. 18. React • Written by Facebook • Referred to as the ‘V’ in MVC • Takes advantage of Virtual DOM – enhances performance • Uses JSX, away to make HTML act like JavaScript code (kinda) • Many application capabilities (data, layout, components) handled by other libraries
  19. 19. API and State Mgmt State of JS 2017
  20. 20. Web API
  21. 21. Back-end frameworks State of JS 2017
  22. 22. MERN/ MEAN • Combines free, open source products for front-end and back-end • All are JavaScript based • Write everything in JavaScript, whether it’s the database, web services or front-end • MongoDB - database • Express – web application framework running on Node.js • React or Angular – adds the framework that runs in the browser • Node – server side execution environment
  23. 23. Testing Tools State of JS 2017
  24. 24. Styling State of JS 2017
  25. 25. Adaptive Design vs. Responsive Design • How an application responds when run on different sized screens or devices • Adaptive Design, show a completely different user interface based on the device type - e.g. desktop compared to mobile • Responsive Design, the app is may be resizing, repositioning or showing/hiding components based on available screen size - the same view is running across all device types and screen sizes
  26. 26. Build Tools State of JS 2017
  27. 27. Node Package Manager • Essentially, npm is a huge repository of open source JavaScript based code packages – 650,000 packages • npm,Inc. offers this as a free service, and offers some enterprise services • Packages can be anything from a few lines of code, to a fully featured framework • Developers just execute a simple command to add a package to their project, and it automatically adds any dependencies • Manage versions of packages being used
  28. 28. Transpilers and Polyfills and SourceMaps (oh my!) • These are needed to use ES6 today, since browsers do not yet fully support ES6 • Transpilers are JavaScript-to-JavaScript compilers • From ES6 (the new syntax) to ES5 (the browser supported syntax) • Babel is a popular transpiler • Polyfills provide missing language syntax • SourceMaps allow you to debug the code you wrote, even though the transpiled code is what is being run
  29. 29. Mobile Frameworks State of JS 2017
  30. 30. Progressive Web Applications • All about the enablement of web applications to offer native-like benefits, such as offline support: – Load the app when offline – Cache app data locally so the user can carry on working when offline • To the user, it looks like a native app, and works with no internet Connectivity • Displaying a banner inviting the user to “install” the app to their home screen (on mobile) • Requires modern browsers, like Chrome and Firefox
  31. 31. Web Security Threats