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.
2. Why PM need technical skills?
• Engaged Customer Interactions
• Strong working relationship with engineers
• Intuition on how long engineering work will
take
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. 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
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. 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. API and State Mgmt
State of JS 2017
https://stateofjs.com/
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
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
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. 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
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
