Webpack 2 – the Last Bundler You Would Need in 2017 Vijay Dharap, Principal Architect, Infosys

Total Page:16

File Type:pdf, Size:1020Kb

Webpack 2 – the Last Bundler You Would Need in 2017 Vijay Dharap, Principal Architect, Infosys Webpack 2 – The last bundler you would need in 2017 Vijay Dharap, Principal Architect, Infosys Speaker Bio • 14+ Years of experience • Principal Architect in Infosys • Passionate about delightful UX • Open Source Evangelist and contributor • Organizer for Yearly Tech Conferences within Infosys 2 Before we begin… Let me know you guys a little Have you have Are you a used webpack web before? developer? Have you worked with Used npm anything like ecosystem? webpack? Grunt? Gulp? WORLD WITHOUT WEBPACK Step-00 – AS-IS no webpack scenario • npm install • npm run server • Access http://localhost:3000/step-00 in chrome. • Observe loading in chrome devtools network tab LETS INTRODUCE WEBPACK TO THE MIX… At its core, Webpack is a… • Loader – Loads Javascript AND Non-Javascript files for processing. Post processing, it may add it into bundles. • Bundler – Bundles javascript assets into one or more bundles • Set of Plugins – add additional functionality to core webpack functionality // App.js // webpack.config.js import * as _ from { 'lodash'; ... import './module2.js'; outputPath: ‘./dist’, webpack import './app.css'; import db from entry: ‘app.js’ './db.json'; } Parser (acorn) import * as $ from 'jquery'; Application modules import { CompA } from App.js './A.Component.ts'; Loader(s) ======================== /* app.css */ App.css Module2.js @import A.Component.ts Db.json '~normalize.css'; Compiler File (bundler) Emitter .brand { Brand.png background-image: 'brand.png'; } Plugins node_modules Normalize.css jquery lodash dist bundle.e266902 brand.eda23 342def232ba33. 2388701db. js png Step-01 – Let redo Step-00 example with webpack To run Step-01 npm run server npm run s1 Access http://localhost:3000/step-01 in chrome. Effect of webpack • Normal No bundling,Effect ofno webpack minification on build (Step size -00) – 3G Throttled 250 4.5 4 200 3.5 3 150 • Webpacked – DEV (Step-02) 3G Throttle 2.5 2 100 1.5 Request count # count Request Data Transferred (kb) Transferred Data 50 1 (seconds) Taken Time • Webpacked – Production (Step-02) – 3G Throttle 0.5 0 0 Step-00 Step-02 - DEV Step-02 - PROD Data Transferred 66.4 10.4 6.7 Request Count 203 2 2 Time taken 4.11 0.563 0.537 Data Transferred Request Count Time taken Automatic JS What did we attain? Graph Parsing Huge improvement OOTB in Time to Webpack Minification Interactive HTTP Request Reduction LET’S LOAD IT UP! Step-02 – Load it up! • Popular loaders Typical File name patterns Loader Name Bundles OR copies? *.js(x) babel-loader Bundles *.css Style-loader Bundles Css-loader *.scss Sass-loader Bundles *.html Html-loader Bundles Fonts (*.ttf, *.woff(2), *.eot) url-loader Copies File-loader *.json Json-loader Bundles *.ts To run Step-02Typescript -loader Bundles Images( *jpg, *.pngnpm, *.gif)run serverFile -loader Copies npm run s2 Access http://localhost:3000/step-02 in chrome. What did we attain? • Automatic parsing of modules from “node_modules” directory via “~” shortcut. • Tree-shaking (-p only) • Loaded, Bundled / Copied the modules and other assets into deployable directory Step-03 – Dev-Server • A web server via express • live-reloading via sockjs! Hello BrowserSync! To run Step-03 npm run s3 Access http://localhost:3000 in chrome. Step-04 - Customize to your satisfaction! • Popular plugins Name Description DefinePlugin Defines ENV variables. Useful for environment specific variations. ProvidePlugin Provides for certain symbols so you do not have to declare them. HtmlWebpackPlugin Creates index.html with script bundle names added into it. UglifyjsPlugin UglifyJS integration – automatically added for PRODUCTION DLLBundlesPlugin + Without DLL build time = 9.675 s AddAssetsHTMLPlugin With DLL build time = 6.967 s To run Step-04 npm runInternally s4 uses core webpack plugins (DllPlugin and AccessDLLReferencePlugin http://localhost:3000) in chrome. npm run s4:prod Step-05 – Code Splitting and Chunking • Split the JS Chunks • Different ways to split JS chunks – Add multiple entries – useful to logically split vendors modules. • Why we should split “vendors” out? App Logical deployments will not “invalidate” the caches. – Dynamic imports – e.g. lazy loading • Split out the CSS - ExtractTextWebpackPlugin To run Step-05 npm run server npm run s5 Access http://localhost:3000/step-05 in chrome. What did we achieve? • Lazy loading things which we do not need for homepage – better TTI • Splitting vendor – improve on development turnaround time, – Improve on cacheability in PROD environment • Splitting CSS out of bundle – Avoids FOUC using ExtractTextWebpack Plugin • Automatic Cache Busting via hash in bundle name. • SourceMaps … so.. We ❤ webpack because… Optimal size Versatile via Tree loading Shaking and sytem minification Bundling Cache and code busting Goodies like splitting dev-sever, analyzer and awesome plugins Credits • Webpack.js.org • Survivejs.com • Repository https://github.com/dharapvj/learning-webpack2 Thank you www.modsummit.com www.developersummit.com .
Recommended publications
  • Introduction to React.Js
    Introduction to React A workshop for COMP 523 Aaron Smith Monday, Feb. 10, 2020 What is React? • React is a JavaScript framework • Used for front end web development • Think of jQuery, but more structured • Created and used by Facebook • Famous for implementing a virtual dom Timeline of front-end JavaScript frameworks jQuery* AngularJS React Vue Angular (2006) (2010) (2013) (2014) (2014) * jQuery is more often considered a library than a framework Common tasks in front-end development App state Data definition, organization, and storage User actions Event handlers respond to user actions Templates Design and render HTML templates Routing Resolve URLs Data fetching Interact with server(s) through APIs and AJAX Fundamentals of React 1. JavaScript and HTML in the same file (JSX) 2. Embrace functional programming 3. Components everywhere JavaScript and HTML in the same file HTML CSS JS JSX CSS or JSS Traditional React approach approach JSX: the React programming language const first = "Aaron"; const last = "Smith"; const name = <span>{first} {last}</span>; const list = ( const listWithTitle = ( <ul> <> <li>Dr. David Stotts</li> <h1>COMP 523</h1> <li>{name}</li> <ul> </ul> <li>Dr. David Stotts</li> ); <li>{name}</li> </ul> </> ); “React is just JavaScript” Functional programming 1. Functions are “first class citizens” 2. Variables are immutable 3. Functions have no side effects Functional programming Functions are “first class citizens” let add = function() { console.log('Now adding numbers'); const five = 3 + 2; }; function foo() { return
    [Show full text]
  • Marketing Cloud Published: August 12, 2021
    Marketing Cloud Published: August 12, 2021 The following are notices required by licensors related to distributed components (mobile applications, desktop applications, or other offline components) applicable to the services branded as ExactTarget or Salesforce Marketing Cloud, but excluding those services currently branded as “Radian6,” “Buddy Media,” “Social.com,” “Social Studio,”“iGoDigital,” “Predictive Intelligence,” “Predictive Email,” “Predictive Web,” “Web & Mobile Analytics,” “Web Personalization,” or successor branding, (the “ET Services”), which are provided by salesforce.com, inc. or its affiliate ExactTarget, Inc. (“salesforce.com”): @formatjs/intl-pluralrules Copyright (c) 2019 FormatJS Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    [Show full text]
  • Webinar - Kick Start Your Widget Development
    Webinar - Kick start your widget development Kickstart your widget development Jelte Lagendijk | Feb 5 2016 Thank you for joining the Expert webinar "Kickstart your widget development". My name is Jelte Lagendijk, I am a JavaScript developer for the Community team at Mendix. At the Community team we want to enable our Community to create content. In this particular case, we want to enable you as a JavaScript developer to develop your own widgets. For this webinar we expect you to know how a widget works, have technical knowledge about JavaScript and have a basic understanding what Node.js is. Agenda Agenda Scaffolding a widget in a minute Speeding up development using Grunt Updating existing widgets Deprecations (Bonus) Demo time! This webinar will demonstrate new tooling: the use of the Yeoman widget generator and Grunt. We’ll not go in-depth on how a widget works. We have a tutorial on how to create your first widget: https://world.mendix.com/display/howto6/Creating+a+Basic+Hello+World+Custom+Widget Scaffolding (1) Scaffolding (1) Previously Brackets + Mendix widget plugin . Visual and easy to use . Has a few bugs that are hard to fix . Less support – smaller community Introducing a new tool: Yeoman generator . Editor independent . Faster . Better maintainable The Developing a widget using Brackets how-to can be found here: https://world.mendix.com/display/howto6/Getting+started+with+the+Widget+Development +Plugin+for+Adobe+Brackets Scaffolding 2 Scaffolding (2) Yeoman is a scaffolding tool running on top of Node.js + Client uses generators as templates to scaffold various web applications or frameworks .
    [Show full text]
  • “Web Development Using Python” 01 April 2021
    A Report on the Webinar “Web development using Python” 01 April 2021 Organized by ‘Anacron’, Students association of the Department of Computer Science and Engineering, Akshaya College of Engineering and Technology A webinar, “Web development using Python” was organized by the students’ association, ‘Anacron’ of the department of Computer Science and Engineering, on 1-4-21. A brief report of the same is given below. WELCOME ADDRESS: Welcome address was given by Dr. N. Rajkumar, HOD/CSE, ACET. INTRODUCTION OF CHIEF GUEST Ms. J. Rajichellam completed her UG degree B.E CSE in Madurai Institute of Engineering and Technology. She is having certificates of proficiency in C, C++, HTML5, CSS, Javascript, Jquery, etc.,. She is having more than 6 years of industrial experience and currently working as Technical trainer in Elysium Academy. CHIEF GUEST PRESENTATION: Ms. J. Rajichellam started her presentation with a brief note about the future for Web development using python and then explained about the career opportunities in Python. She also explained as to why students should be well versed in python. She also urged the students to have a goal for their career and for that they should envisage a plan. She opined that without a plan they can’t achieve success. She said, Web development is an umbrella term for conceptualizing, creating, deploying and operating web applications and application programming interfaces for the web. She basically gave explanation for three topics. 1. Why is web development important? The web has grown a mindboggling amount in the number of sites, users and implementation capabilities since the first website went live in 1989.
    [Show full text]
  • Jquery Cloudflare Your Company Via Grunt-Contrib-Uglify Used to Build That Jquery
    JavaScript & Security get married Yan Zhu NCC Group SF Open Forum 9/17/15 F YEAH RUSTIC PENNSYLVANIA WEDDING THEME!! About me: ● Security Engineer at Yahoo! by day ● EFF Technology Fellow (Let’s Encrypt, HTTPS Everywhere) ● That’s a real photo of me -> Our story 09.??.1995 08.19.15 JavaScript released! Started investigating JS optimizer security as a side project. ??.??.1991 01.05.11 08.23.15 I was born! Wrote my first line of Got bored and mostly JavaScript. stopped working on this project. This talk is about JavaScript. (sorry not sorry) JAVASCRIPT What runs JS? ● Browsers ● Servers (node/io.js) ● Soon: everything Inspiration GET YOUR COPY TODAY PoC||GTFO 0x08 https://www.alchemistowl.org/pocorgtfo/ “No amount of source-level verification or scrutiny will protect you from using untrusted code. In demonstrating the possibility of this kind of attack, I picked on the C compiler. I could have picked on any program-handling program such as an assembler, a loader, or even hardware microcode. As the level of program gets lower, these bugs will be harder and harder to detect.” Ken Thompson, Reflections on Trusting Trust (1984) seen in the wild! JS isn’t “compiled,” but ... ● Transpilers to JS exist for every major language ● JS sugar (CoffeeScript, Coco, LiveScript, Sibilant) ● Optimizers (Closure, Uglify) ● Static typing (Closure, Flow, TypeScript, asm.js) ● Language extensions (React’s JSX) ● ES6 -> ES5 converter (Babel) more at https://github.com/jashkenas/coffeescript/wiki/list-of-languages-that- compile-to-js Let’s get hackin’ Step 1: Pick a JS library Who uses UglifyJS2? INSERT OVERCROPPED LOGO gruntjs jquery cloudflare your company via grunt-contrib-uglify used to build that jquery.
    [Show full text]
  • Download Ebook ^ Javascript: Ajax, Cross-Site Scripting, Couchdb
    W5CAMG0U1NWQ < PDF ^ JavaScript: Ajax, Cross-Site Scripting, CouchDB, WebKit, JQuery, Dojo Toolkit, Bookmarklet, ActionScript, V8,... JavaScript: A jax, Cross-Site Scripting, Couch DB, W ebKit, JQuery, Dojo Toolkit, Bookmarklet, A ctionScript, V 8, SpiderMonkey, Qooxdoo, Ext JS Filesize: 7.09 MB Reviews It becomes an amazing book which i actually have at any time study. It is actually loaded with wisdom and knowledge You wont sense monotony at at any time of your respective time (that's what catalogues are for regarding should you request me). (Rosina Schowalter V) DISCLAIMER | DMCA EUQW6UIGSWMD > Kindle « JavaScript: Ajax, Cross-Site Scripting, CouchDB, WebKit, JQuery, Dojo Toolkit, Bookmarklet, ActionScript, V8,... JAVASCRIPT: AJAX, CROSS-SITE SCRIPTING, COUCHDB, WEBKIT, JQUERY, DOJO TOOLKIT, BOOKMARKLET, ACTIONSCRIPT, V8, SPIDERMONKEY, QOOXDOO, EXT JS Books LLC, Wiki Series, 2011. Condition: New. This item is printed on demand for shipment within 3 working days. Read JavaScript: Ajax, Cross-Site Scripting, CouchDB, WebKit, JQuery, Dojo Toolkit, Bookmarklet, ActionScript, V8, SpiderMonkey, Qooxdoo, Ext JS Online Download PDF JavaScript: Ajax, Cross-Site Scripting, CouchDB, WebKit, JQuery, Dojo Toolkit, Bookmarklet, ActionScript, V8, SpiderMonkey, Qooxdoo, Ext JS R6UOTKQRMAXT « PDF \ JavaScript: Ajax, Cross-Site Scripting, CouchDB, WebKit, JQuery, Dojo Toolkit, Bookmarklet, ActionScript, V8,... See Also A Smarter Way to Learn JavaScript: The New Approach That Uses Technology to Cut Your Effort in Half Createspace, United States, 2014. Paperback. Book Condition: New. 251 x 178 mm. Language: English . Brand New Book ***** Print on Demand *****.The ultimate learn-by-doing approachWritten for beginners, useful for experienced developers who want to... Read PDF » Why We Hate Us: American Discontent in the New Millennium Random House USA Inc, United States, 2009.
    [Show full text]
  • Choosing the Right Javascript Framework for Your Next Web
    Choosing the Right JavaScript Framework for Your Next Web Application by Brandon Satrom © 2017 Progress. All Rights Reserved. All Rights © 2017 Progress. 2018 WHITEPAPER Table of Contents The Current State of Web Frameworks / 3 Tooling Considerations / 22 Evaluation Criteria / 5 UI & Component Libraries / 22 Ecosystem Considerations / 7 IDE & Tooling Support / 23 History & Longevity / 7 Companion & CLI Tools / 24 Popularity / 9 Enterprise Considerations / 26 Corporate Support / 11 Licensing / 26 Community & Ecosystem / 12 Support & Upgrade Paths / 27 Framework Considerations / 13 Security / 29 Getting Started Experience / 13 Talent Pool & Resources / 30 Skill Requirements / 15 Making a Choice / 33 Completeness of Offering / 17 Size & Performance / 18 Beyond the Browser Options / 21 © 2018 Progress. All Rights Reserved. All Rights © 2018 Progress. Progress / Kendo UI 2 The state of web application development has changed drastically in the past ten years. These changes have been spurred on by greater bandwidth for many, more powerful and feature-rich browsers. The result is a thriving web ecosystem with sites, apps and experiences that would have been hard to imagine a decade ago. And yet, for many developers, this ecosystem often feels like a bazaar, stuffed with libraries and frameworks that do anything and everything one could imagine. For every need there are a dozen options to choose from, and with new stalls (libraries) opening every day, it’s no wonder many of us pine for the days when starting a new project was as simple as dropping jQuery in a script tag. The Current State of Web Frameworks There’s no doubt that the web has grown in complexity, and our development tooling options have grown along with it.
    [Show full text]
  • How to Pick Your Build Tool
    How to Pick your Build Tool By Nico Bevacqua, author of JavaScript Application Design Committing to a build technology is hard. It's an important choice and you should treat it as such. In this article, based on the Appendix from JavaScript Application Design, you'll learn about three build tools used most often in front-end development workflows. The tools covered are Grunt, the configuration-driven build tool; npm, a package manager that can also double as a build tool; and Gulp, a code-driven build tool that's somewhere in between Grunt and npm. Deciding on a technology is always hard. You don't want to make commitments you won't be able to back out of, but eventually you'll have to make a choice and go for something that does what you need it to do. Committing to a build technology is no different in this regard: it's an important choice and you should treat it as such. There are three build tools I use most often in front-end development workflows. These are: Grunt, the configuration-driven build tool; npm, a package manager that can also double as a build tool; and Gulp, a code-driven build tool that's somewhere in between Grunt and npm. In this article, I'll lay out the situations in which a particular tool might be better than the others. Grunt: The good parts The single best aspect of Grunt is its ease of use. It enables programmers to develop build flows using JavaScript almost effortlessly. All that's required is searching for the appropriate plugin, reading its documentation, and then installing and configuring it.
    [Show full text]
  • Automated Large-Scale Multi-Language Dynamic Program
    Automated Large-Scale Multi-Language Dynamic Program Analysis in the Wild Alex Villazón Universidad Privada Boliviana, Bolivia [email protected] Haiyang Sun Università della Svizzera italiana, Switzerland [email protected] Andrea Rosà Università della Svizzera italiana, Switzerland [email protected] Eduardo Rosales Università della Svizzera italiana, Switzerland [email protected] Daniele Bonetta Oracle Labs, United States [email protected] Isabella Defilippis Universidad Privada Boliviana, Bolivia isabelladefi[email protected] Sergio Oporto Universidad Privada Boliviana, Bolivia [email protected] Walter Binder Università della Svizzera italiana, Switzerland [email protected] Abstract Today’s availability of open-source software is overwhelming, and the number of free, ready-to-use software components in package repositories such as NPM, Maven, or SBT is growing exponentially. In this paper we address two straightforward yet important research questions: would it be possible to develop a tool to automate dynamic program analysis on public open-source software at a large scale? Moreover, and perhaps more importantly, would such a tool be useful? We answer the first question by introducing NAB, a tool to execute large-scale dynamic program analysis of open-source software in the wild. NAB is fully-automatic, language-agnostic, and can scale dynamic program analyses on open-source software up to thousands of projects hosted in code repositories. Using NAB, we analyzed more than 56K Node.js, Java, and Scala projects. Using the data collected by NAB we were able to (1) study the adoption of new language constructs such as JavaScript Promises, (2) collect statistics about bad coding practices in JavaScript, and (3) identify Java and Scala task-parallel workloads suitable for inclusion in a domain-specific benchmark suite.
    [Show full text]
  • Spring Semester 2020 - Week 13
    Comp 324/424 - Client-side Web Design Spring Semester 2020 - Week 13 Dr Nick Hayward Systems Management - Build Tools & Project Development Extra notes Systems Environments & Distributions Build first - overview and usage Grunt basics integrate with project outline and development integrate with project release Webpack setup for local project basic usage assets for local project … JavaScript - Prototype intro along with the following traits of JS (ES6 …), functions as first-class objects versatile and useful structure of functions with closures combine generator functions with promises to help manage async code async & await… prototype object may be used to delegate the search for a particular property a prototype is a useful and convenient option for defining properties and functionality accessible to other objects a prototype is a useful option for replicating many concepts in traditional object oriented programming JavaScript - Prototype understanding prototypes in JS, we may create objects, e.g. using object-literal notation a simple value for the first property a function assigned to the second property another object assigned to the third object let testObject = { property1: 1, prooerty2: function() {}, property3: {} } as a dynamic language, JS will also allow us to modify these properties delete any not required or simply add a new one as necessary this dynamic nature may also completely change the properties in a given object this issue is often solved in traditional object-oriented languages using inheritance in JS, we can use prototype to implement inheritance JavaScript - Prototype basic idea of prototypes every object can have a reference to its prototype a delegate object with properties - default for child objects JS will initially search the onject for a property then, search the prototype i.e.
    [Show full text]
  • Qooxdoo Interview Questions and Answers Guide
    Qooxdoo Interview Questions And Answers Guide. Global Guideline. https://www.globalguideline.com/ Qooxdoo Interview Questions And Answers Global Guideline . COM Qooxdoo Job Interview Preparation Guide. Question # 1 What is Qooxdoo? Answer:- qooxdoo is an open source Ajax web application framework. It is an LGPL- and/or EPL-licensed multipurpose framework that includes support for professional JavaScript development, a graphical user interface (GUI) toolkit and high-level client-server communication. Read More Answers. Question # 2 Is qooxdoo freely available? Answer:- Yes. qooxdoo is Open Source, dual-licensed under LGPL/EPL, i.e. the "GNU Lesser General Public License (LGPL)" and the "Eclipse Public License (EPL)". As a recipient of qooxdoo, you may choose which license to receive the code under. Read More Answers. Question # 3 Who developed qooxdoo? Answer:- qooxdoo was initiated and is maintained by 1&1, the world's biggest web hosting company. There is a team of full-time core developers as well as many committers and contributors. Read More Answers. Question # 4 Which browsers are supported? Answer:- A qooxdoo application runs in all major web browsers - with identical look & feel. Read More Answers. Question # 5 Does qooxdoo come with a server? Answer:- No. If you already have an existing backend that serves HTTP (or HTTPS) requests, it's probably fine to continue using it. Optionally qooxdoo offers several RPC servers for an elegant client-server communication. BTW, during development of your client application the local file system often is sufficient, without the need to use a real server. Read More Answers. Question # 6 What languages and technologies do we need to know? Answer:- Not many.
    [Show full text]
  • Preview Extjs Tutorial (PDF Version)
    About the Tutorial ExtJS stands for Extended JavaScript. It is a JavaScript framework and a product of Sencha, based on YUI (Yahoo User Interface). It is basically a desktop application development platform with modern UI. This tutorial gives a complete understanding of Ext JS. This reference will take you through simple and practical approaches while learning Ext JS. Audience This tutorial has been prepared for beginners to help them understand the concepts of ExtJS to build dynamic web UI. Prerequisites For this tutorial, the reader should have prior knowledge of HTML, CSS, and JavaScript coding. It would be helpful if the reader knows the concepts of object-oriented programming and has a general idea on creating web applications. Execute ExtJS Online For most of the examples given in this tutorial you will find a Try it option. Make use of this option to execute your ExtJS programs on the spot and enjoy your learning. Try the following example using the Try it option available at the top right corner of the following sample code box − <!DOCTYPE html> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme- classic/resources/theme-classic-all.css" rel="stylesheet" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.Panel', { renderTo: 'helloWorldPanel', height: 100, i width: 200, title: 'Hello world', html: 'First Ext JS Hello World Program' }); }); </script> </head> <body> <div id="helloWorldPanel"></div> </body> </html> Copyright & Disclaimer Copyright 2017 by Tutorials Point (I) Pvt.
    [Show full text]