Demystifying Modern Web Development
•Download as PPTX, PDF•
2 likes•1,426 views
At Grace Hopper Conference 2016, Komal Bhatia discusses traditional vs. modern web development, the tools and frameworks needed and how to choose the right ones for you.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Demystifying Modern Web Development
Similar to Demystifying Modern Web Development (20)
More from Intuit Inc.
More from Intuit Inc. (20)
Recently uploaded
Recently uploaded (20)
Demystifying Modern Web Development
- 1. PAGE 1 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC16 2016Demystifying Modern Web Development Komal Bhatia @komalbhatia10
- 2. PAGE 2 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY $ whoami Komal Bhatia Role: Senior Software Engineer Company: Intuit Product: QuickBooks Online Expertise: Front-end Interests: Half marathons, surfing
- 3. PAGE 3 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY What we will do in this session Shed some light on Modern Web Development 1. Traditional vs. Modern web development 2. Tools and frameworks 3. How to choose the right ones for you
- 4. PAGE 4 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY What does a web application consist of?
- 5. PAGE 5 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Traditional way vs. Modern way
- 6. PAGE 6 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Traditional way
- 7. PAGE 7 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Modern Way - Single Page Applications (SPA) • Load a single web page • Dynamically update the page as the user interacts with the app • Provide native app like experience • No page reloads • No extra wait time
- 8. PAGE 8 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY How Single Page Applications work • All content is retrieved with in the initial request • The page does not reload at any point • Data (not HTML) is exchanged between server and client
- 9. PAGE 9 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Advantages of the modern way • Faster apps • Improved user experience • Can be made offline • Decoupling of front-end and back-end • Simplicity in development • Same back-end for web, native mobile application • Can be exposed to 3rd party developers
- 10. PAGE 10 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Modern tools and frameworks
- 11. PAGE 11 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Confused by all the technology out there?
- 12. PAGE 12 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Front-end web application components Testing Platforms Package Managers Text Editors JavaScriptCSSHTML Frameworks / Libraries Build ToolsAPI Layers
- 13. PAGE 13 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY List of modern tools and technologies HTML CSS JavaScript Frameworks/Libraries API Layers Build Tools Package Managers Testing Platforms Text Editors Haml HTML abstraction markup language • Readability • Cleanliness • Speed Markdown Plain text-to-HTML conversion Simple syntax
- 14. PAGE 14 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY List of modern tools and technologies HTML CSS JavaScript Frameworks/Libraries API Layers Build Tools Package Managers Testing Platforms Text Editors 36% 35% 18% 10% 1% Plain CSS SASS/SCSS LESS CSS Modules Other SASS: Syntactically Awesome Style Sheets SCSS: Sassy CSS Advantages • CSS on steroids • Add programming traits • Variables, operations, functions, rules
- 15. PAGE 15 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY List of modern tools and technologies HTML CSS JavaScript Frameworks/Libraries API Layers Build Tools Package Managers Testing Platforms Text Editors 43% 40% 3% 11% 3% Plain JS ES6 CoffeeScript TypeScript Other Advantages • Add features to JS • Improved syntax, clean, concise • Class and module support • Type checking • Variable scoping
- 16. PAGE 16 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY List of modern tools and technologies HTML CSS JavaScript Frameworks/Libraries API Layers Build Tools Package Managers Testing Platforms Text Editors 32% 18% 8% 5% 6% 6% 25% React Angular Angular 2 Ember Backbone Other None
- 17. PAGE 17 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Libraries and Frameworks Library Piece of reusable code, that provides specific functionality More flexibility Your code calls a library Ex: Your code Library Framework Framework Describes structure of the app and gives a way to organize code Less flexibility Framework calls your code Ex: Framework calls youYou call library can contain
- 18. PAGE 18 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY React vs. Angular vs. Ember • View library, not framework • Renders UI components • Used with Flux library Strengths: Performance improvements Server-side rendering Simplicity Library approach - flexible Weakness Flux architecture is different People dislike JSX • Framework approach • Has everything you need • Improved router Strengths: Performance improvements Native app support Server-side rendering Weakness Documentation is poor Previous resources not helpful • All tools included f/w • Quick to get started Strengths: Performance improvements Server-side rendering Great documentation Command line tooling Weakness Cumbersome Smaller community
- 19. PAGE 19 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY List of modern tools and technologies HTML CSS JavaScript Frameworks/Libraries API Layers Build Tools Package Managers Testing Platforms Text Editors 75% 17% 5% 1% 2% REST API Firebase GraphQL Apollo Other API Layer Provides common way to interact with an app Firebase: tools to develop high quality apps like analytics, authentication, storage, db GraphQL: Query language for your APIs. Gets all data in single request.
- 20. PAGE 20 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY List of modern tools and technologies HTML CSS JavaScript Frameworks/Libraries API Layers Build Tools Package Managers Testing Platforms Text Editors 31% 17% 34% 18% Webpack Grunt Gulp Browserify Build Tools Compiling, linking, packaging • Webpack: module builder that generates static assets • Webpack and Gulp are the shiny future.
- 21. PAGE 21 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY List of modern tools and technologies HTML CSS JavaScript Frameworks/Libraries API Layers Build Tools Package Managers Testing Platforms Text Editors 40% 33% 10% 8% 9% Mocha Jasmine Enzyme Cucumber Other Testing Platforms Mocha and Jasmine are the most popular
- 22. PAGE 22 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Or… pick a full stack platform
- 23. PAGE 23 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Most popular full stack platforms 58% 29% 10% 3% MEAN Meteor MERN FeathersJS MEAN = MongoDB + Express + AngularJS + NodeJS MERN = MongoDB + Express + ReactJS + NodeJS + Redux + Webpack
- 24. PAGE 24 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Now I know the various tools and options! But how do I choose?
- 25. PAGE 25 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Factors to choose your tech stack
- 26. PAGE 26 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Mobile or Web? Design for your target user base: Mobile only, Web only, Mobile first, Mobile later
- 27. PAGE 27 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Who will build this? Think about team – their skills, developer experience, team size, how to increase productivity
- 28. PAGE 28 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Observe the other players in your space What does your product need - ecommerce, social, video conferencing platform?
- 29. PAGE 29 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Think about scalability and performance What stage are you at? (MVP, launch, rewrite) Speed to market vs. long term scalable solution
- 30. PAGE 30 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Check for community support Small community v/s Active community Github tools • Most starred: http://github-rank.com/star • Trending: https://github.com/trending
- 31. PAGE 31 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Key take-aways • Let the tools help you. Focus on the functionality. • Don’t reinvent the wheel. Build on top of what exists. • Things move fast in the front-end world. Embrace change. • Do not use something just because its shiny. Evaluate. • Don’t stop learning. Explore.
- 32. PAGE 32 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
- 33. PAGE 33 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Thank you Feedback? Download at http://bit.ly/ghc16app or search GHC 16 in the app store Rate and review the session on our mobile app
- 34. PAGE 34 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Questions? Komal Bhatia @komalbhatia10
- 35. PAGE 35 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY References http://stackshare.io/stackups/markdown-vs-haml-vs-html5 https://www.smashingmagazine.com/2011/09/an-introduction-to-less-and- comparison-to-sass/ https://blog.appdynamics.com/devops/the-benefits-of-migrating-from-javascript-to- typescript/ https://bytescout.com/blog/2016/07/javascript-vs-coffeescript-vs-typescript.html http://thejsguy.com/2015/01/12/jasmine-vs-mocha-chai-and-sinon.html http://brettterpstra.com/2011/08/31/why-markdown-a-two-minute-explanation/ http://smashingboxes.com/blog/choosing-a-front-end-framework-angular-ember- react
- 36. PAGE 36 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY References and important links How it feels to learn JS https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016- d3a717dd577f#.2zvu7pnx2 http://blog.debugme.eu/front-end-web-developer-tools/ http://www.slideshare.net/kmstechnology/introduction-to-single-page- application How to choose tech stack http://svsg.co/how-to-choose-your-tech-stack/ https://blog.jixee.me/how-to-choose-your-tech-stack/ https://www.smashingmagazine.com/2009/03/40-stand-alone-javascript- libraries-for-specific-purposes/
- 37. PAGE 37 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY References for diagrams http://stateofjs.com/2016/frontend/ https://www.linkedin.com/pulse/whats-difference-between-library- framework-ledion-spaho http://youdedicated.com/images/design/responsive.png http://stateofjs.com/2016/frontend/ http://www.sybite.com/assets/img/dedicated_team.png
- 38. PAGE 38 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Extra Slides
- 39. PAGE 39 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY How the pieces work together
- 40. PAGE 40 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Most popular Full Stack Platforms -MEAN MEAN = MongoDB + Express + AngularJS + NodeJS MongoDB: Flexible, accommodating layer for storing data. Express.js helps standardize how you build your websites. AngularJS: provides a clean way of adding interactive functions and AJAX-driven rich components. NodeJS:provides a better nexus for running your server
Editor's Notes
- Interests? Use emotions Personal Say stuff about u that pertains I am worth listening to because.. We have been around for 33 years We have had to move to modern Many of u will start from scrath – lucky u Infor I am sharing is usefuk for hwether ur new or..
- To shed light on modern web development Make it easier to understand To make modern web development easier to understand! If you want to be a web developer today, what do you need to know to be successful
- Web application It is a client - server software application in which the client (or user interface) runs in a web browser
- Runs inside the browser All the code is loaded once N data UI Is driven from the client and display the data is SINGLE PAGE APPLICATION Single Page Application is a web app in which the majority of interactions are handled on the client without the need to reach a server, with a goal of providing a more fluid user experience Reference: http://www.slideshare.net/EdurekaIN/angular-js-wp29july How many of you have heard about Single Page applications? http://www.slideshare.net/RJRony1/spa-using-angular-js http://www.slideshare.net/kmstechnology/introduction-to-single-page-application
- Redraw UI without server round-trip to retrieve HTML
- More interactive Faster apps (less response time) Improved user experience - feels like native app Can be made offline – all pages are already loaded Same back end – 3rd party Static app before – dynamic app - intereact Less dependency on what? Sepraraion of concerns – explain Checklist with improvements Good link: http://www.eikospartners.com/blog/multi-page-web-applications-vs.-single-page-web-applications Faster apps (better speed/performance) Simplicity in development Separation of concerns Less dependency Quicker development Order is not imp No numbers No sinfle bullet
- Plethora of technologies and names out there..
- HTML CSS JavaScript Frameworks/ Libraries API Layers Build Tools Package Managers Testing Platform Text Editors
- https://coggle.it/diagram/Vz9LvW8byvN0I38x Have one Back end Front end
- https://coggle.it/diagram/Vz9LvW8byvN0I38x Have one Back end Front end
- https://coggle.it/diagram/Vz9LvW8byvN0I38x Have one Back end Front end
- https://coggle.it/diagram/Vz9LvW8byvN0I38x HTML CSS JavaScript Frameworks/ Libraries API Layers Build Tools Package Managers Testing Platform Text Editors
- React: JS library for building UI Ember: Framework for creating web applications https://www.linkedin.com/pulse/whats-difference-between-library-framework-ledion-spaho Library Collection of classes more freedom to design how the system works, how everything will connect together; A team with many junior developers may be better off with a framework, enforcing structure and standards, telling them how to build the app;
- https://coggle.it/diagram/Vz9LvW8byvN0I38x HTML CSS JavaScript Frameworks/ Libraries API Layers Build Tools Package Managers Testing Platform Text Editors
- https://coggle.it/diagram/Vz9LvW8byvN0I38x
- https://coggle.it/diagram/Vz9LvW8byvN0I38x
- https://coggle.it/diagram/Vz9LvW8byvN0I38x Intert logo
- Thinking girl 3
- Thinking girl 3
- http://svsg.co/how-to-choose-your-tech-stack/ https://www.google.com/search?q=eureka+gif&espv=2&biw=1440&bih=675&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjoka2WueHPAhWj64MKHSpBAyAQ_AUIBigB#tbm=isch&q=team&imgrc=-b7P01N2pcLB2M%3A Combine with principles launch your MVP on only one platform 2 in one Good artist copy great artsist steel Community support -active contribution ()
- Team skills Developer experience Team size How to increase productivity Front end vs back end http://svsg.co/how-to-choose-your-tech-stack/ https://www.google.com/search?q=eureka+gif&espv=2&biw=1440&bih=675&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjoka2WueHPAhWj64MKHSpBAyAQ_AUIBigB#tbm=isch&q=team&imgrc=-b7P01N2pcLB2M%3A Combine with principles launch your MVP on only one platform 2 in one Good artist copy great artsist steel Community support -active contribution ()
- http://svsg.co/how-to-choose-your-tech-stack/ https://www.google.com/search?q=eureka+gif&espv=2&biw=1440&bih=675&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjoka2WueHPAhWj64MKHSpBAyAQ_AUIBigB#tbm=isch&q=team&imgrc=-b7P01N2pcLB2M%3A Combine with principles launch your MVP on only one platform 2 in one Good artist copy great artsist steel Community support -active contribution ()
- How fast do you need to scale? How fast do you need to iterate? Scalability refers to how well your platform can support increasing requests from your customer base rewrite of an existing app? Front end vs back end http://svsg.co/how-to-choose-your-tech-stack/ https://www.google.com/search?q=eureka+gif&espv=2&biw=1440&bih=675&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjoka2WueHPAhWj64MKHSpBAyAQ_AUIBigB#tbm=isch&q=team&imgrc=-b7P01N2pcLB2M%3A Combine with principles launch your MVP on only one platform 2 in one Good artist copy great artsist steel Community support -active contribution ()
- Small community v/s Active community – hard to find answers and get help Active community – increases team’s ability to to problem solve and fix bugs rewrite of an existing app? Front end vs back end http://svsg.co/how-to-choose-your-tech-stack/ https://www.google.com/search?q=eureka+gif&espv=2&biw=1440&bih=675&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjoka2WueHPAhWj64MKHSpBAyAQ_AUIBigB#tbm=isch&q=team&imgrc=-b7P01N2pcLB2M%3A Combine with principles launch your MVP on only one platform 2 in one Good artist copy great artsist steel Community support -active contribution ()
- Not do something coz its shiny Just coz something is new n shiny – don’t jump on the bandwagon Don’t avoid – be skeptical – keep urself in the loop Follow news letters JS weekly Hackernews News letters Js fluent conf What makes a weba pp? Don’t get attached done\t eb afraid to look at new thig Make this Cut our Web Components are important I want to give you a few takeaways Pep talk
- Intuit case study after demo React for views View library that’s very opunionated abput its data Redux to manipulate views – keep the state of react Rely – is a way to tie JS framewrosk for builing data driven raect apps View Java graphQL oracle V4 apis – apis what we built with graphQL Version of our service
- https://coggle.it/diagram/Vz9LvW8byvN0I38x Intert logo