dotnet mvc and webpack + babel + react
TRANSCRIPT
![Page 2: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/2.jpg)
Agenda• Modularized Javascript• Webpack Introduction• Babel Introdcution• Visual Studio Setup• Collaborate with .net MVC• Web Optimize
![Page 3: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/3.jpg)
Modularized JavaScript
![Page 4: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/4.jpg)
Modularized JavaScript• Pros• Encapsulation• Decoupling• Organization• No global scope pollution• Security• Re-use
• Cons• More difficult to release• Complex dependency
![Page 5: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/5.jpg)
Thinking in React
![Page 6: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/6.jpg)
Webpack Introduction
![Page 7: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/7.jpg)
Webpack - A Module Bundler• A bundler for javascript and friends. Packs many modules into a
few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders," modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff. https://webpack.github.io• Usage: https://webpack.github.io/docs/tutorials/getting-started/
![Page 8: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/8.jpg)
Features• Performance
• uses async I/O and has multiple caching levels. This makes webpack fast and incredibly fast on incremental compilations.
• Loaders• enables use of loaders to preprocess files. This allows you to bundle any static
resource way beyond JavaScript. You can easily write your own loaders using node.js.
• Module Format (AMD/CommonJS)• supports both AMD and CommonJS module styles.
• Code Splitting• allows you to split your codebase into multiple chunks. Chunks are loaded
asynchronously at runtime. This reduces the initial loading time.• Optimizations
• can do many optimizations to reduce the output size of your JavaScript by deduplicating frequently used modules, minifying, and giving you full control of what is loaded initially and what is loaded at runtime through code splitting.
![Page 9: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/9.jpg)
Webpack flow
![Page 10: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/10.jpg)
ReactJS+Webpack Structure
![Page 11: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/11.jpg)
Babel Introdcution
![Page 12: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/12.jpg)
Babel - A Tool to convert ES6 to ES5• A Tool to convert ES6 to ES5• Babel is the most popular tool used to convert ES6 to ES5. It
has various interfaces like a CLI, Node-module and also an online converter. I use the node module for my apps and use theonline version to quickly see the differences.• Why ES6 • 5 JavaScript “Bad” Parts That Are Fixed In ES6• Modularized for React, Babel can convert JSX syntax and strip out type
annotations.
![Page 13: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/13.jpg)
Environment Setup
![Page 14: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/14.jpg)
Visual Studio 2015 with latest update• https://blogs.msdn.microsoft.com/visualstudio/2015/06/10/javascript-editor-improvements-in-visual-studio-2015/• https://www.visualstudio.com/en-us/news/vs2015-update1-vs.aspx• React's JSX is now natively supported• ECMAScript 2015 (formerly ECMAScript 6) support
![Page 15: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/15.jpg)
WebPack Task Runner• https://visualstudiogallery.msdn.microsoft.com/5497fd10-b1ba-474c-8991-1438ae47012a
![Page 16: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/16.jpg)
React Snippet Pack• https://visualstudiogallery.msdn.microsoft.com/234d79e9-f0fd-41e1-a926-850da8e8c7d7
![Page 17: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/17.jpg)
NodeJS• Node.js® is a JavaScript runtime built on
Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. • Node.js' package ecosystem, npm, is the largest ecosystem of
open source libraries in the world.• https://nodejs.org/dist/v4.5.0/node-v4.5.0-x64.msi• https://nodejs.org/dist/v6.6.0/node-v6.6.0-x64.msi
![Page 18: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/18.jpg)
[NPM]Webpack• https://www.npmjs.com/package/webpack• Project: npm install webpack --save-dev• Global: npm install webpack –g
![Page 19: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/19.jpg)
[NPM]webpack-notifier• https://www.npmjs.com/package/webpack-notifier• npm install --save-dev webpack-notifier
![Page 20: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/20.jpg)
Webpack+Babel+React
![Page 21: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/21.jpg)
Grunt/Gulp for React• Not all browsers are supporting ES6 yet, so we're going to have
to transpile our ES6 code, turning it into ES5. We're also going to have to handle 'JSX', the special Javascript that we can use for React. We also need to play well with existing code.
![Page 22: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/22.jpg)
Webpack for React• Webpack is a bundler. It'll take a bunch of loose Javascript files
and build a single file from the lot
![Page 23: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/23.jpg)
Webpack+Babel for React• Even better, we can configure webpack to run files that match
a certain pattern to go through other 'loaders', which can process the files further.• We can use the Babel transpiler to turn an ES6 file to ES5. We
just need the glue to let Webpack use Babel as a loader. That comes in the form of the Babel Loader:
![Page 24: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/24.jpg)
Babel-loader• This package allows transpiling JavaScript files using Babel and webpack. https://github.com/babel/babel-loader
![Page 25: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/25.jpg)
Dependency• React uses JSX as the XML-like syntax extension over JavaScript
to specify component tree structure, data flow, and event handlers. JSX is processed by Webpack module bundler using specific loaders or convertors.
![Page 26: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/26.jpg)
Collaborate with .net MVC
![Page 27: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/27.jpg)
• Demo Download• Original post : detail of how to setup up front-end in asp.net core and MVC5, sample is clone from AspNetReactSamples• Setup• Install node and NPM• Go to root directory and use NPM to install js dependency• npm install
• Build with install nuget dependency• Run App
Demo
![Page 28: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/28.jpg)
Project Structure
![Page 29: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/29.jpg)
package.json
![Page 30: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/30.jpg)
Layout and View
![Page 31: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/31.jpg)
ES6 to ES5(using Babel)
![Page 32: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/32.jpg)
Advance Webpack
![Page 33: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/33.jpg)
Reference• 設定開發React的環境• 設定開發React的環境 - React Hot Loader• Production optimization with React and Webpack
![Page 34: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/34.jpg)
Q & A
![Page 35: DotNet MVC and webpack + Babel + react](https://reader036.vdocuments.us/reader036/viewer/2022062316/587507fd1a28ab29208b6807/html5/thumbnails/35.jpg)
11F., No.399, Ruiguang Rd., Neihu Dist., Taipei City 114, Taiwan TEL: +886 2 2798 8529 Fax: +886 2 2798 8531 Website : www.xuenn.com
THANK YOU!