SlideShare a Scribd company logo
Webpack & Babel Sharing
Blackie.Tsai
Blackie.tsai@xuenn.com
2016/9/20
Agenda
• Modularized Javascript
• Webpack Introduction
• Babel Introdcution
• Visual Studio Setup
• Collaborate with .net MVC
• Web Optimize
Modularized JavaScript
Modularized JavaScript
• Pros
• Encapsulation
• Decoupling
• Organization
• No global scope pollution
• Security
• Re-use
• Cons
• More difficult to release
• Complex dependency

Recommended for you

Virtualization.ppt
Virtualization.pptVirtualization.ppt
Virtualization.ppt

Virtualization allows multiple operating systems and applications to run on the same hardware at the same time by simulating virtual hardware. There are two main types of virtualization architectures: hosted, where a hypervisor runs on a conventional operating system; and bare-metal, where the hypervisor runs directly on the hardware. Virtualization can be applied to desktops, servers, networks, storage and applications. It provides benefits such as reduced costs, simplified management, and the ability to run multiple systems on one physical machine.

Paravirtualization
ParavirtualizationParavirtualization
Paravirtualization

1) The document discusses three main techniques for virtualizing the x86 CPU: full virtualization using binary translation, OS-assisted virtualization (paravirtualization), and hardware-assisted virtualization. 2) Full virtualization using binary translation allows any x86 OS to run virtualized without modification but has more overhead than other techniques. Paravirtualization requires OS modifications to replace privileged instructions but has lower overhead. Hardware-assisted virtualization uses new CPU features to trap privileged instructions. 3) Each technique has strengths and weaknesses in terms of performance, compatibility, and maintenance requirements. Currently, binary translation performs best overall but hardware assistance will improve over time. VMware uses multiple techniques to deliver the best balance of

cloud computing
History of virtualization
History of virtualizationHistory of virtualization
History of virtualization

Virtualization technology originated on mainframe computers in the 1960s to more efficiently utilize processing power. Early virtualization methods were difficult to manage for dynamic business needs. This led to innovations in virtualization strategies and technologies over time. Key developments included the first hypervisor in 1965, IBM's CP-40 implementation in the 1970s, and increased popularity on personal computers in the 1980s-1990s. VMware introduced desktop and server virtualization products in the late 1990s and 2000s that helped drive broader adoption.

Thinking in React
Webpack Introduction
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/
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.

Recommended for you

Cloud Native Application
Cloud Native ApplicationCloud Native Application
Cloud Native Application

VMware is introducing new platforms to better support cloud-native applications, including containers. The Photon Platform is a lightweight, API-driven control plane optimized for massive scale container deployments. It includes Photon OS, a lightweight Linux distribution for containers. vSphere Integrated Containers allows running containers alongside VMs on vSphere infrastructure for a unified hybrid approach. Both aim to provide the portability and agility of containers while leveraging VMware's management capabilities.

applicationcloud native applicationvmugit
Was ist Docker?
Was ist Docker?Was ist Docker?
Was ist Docker?
doag 2014docker
Virtual machine subhash gupta
Virtual machine subhash guptaVirtual machine subhash gupta
Virtual machine subhash gupta

This document discusses virtual machines. It defines a virtual machine as software that creates a virtualized environment between the computer hardware and the end user, allowing the user to operate software. Virtual machines implement full virtual computer hardware and are created through a combination of real hardware and virtualizing software. There are two types of virtual machines: process virtual machines and system virtual machines. Virtual machines provide benefits like partitioning and isolation, allowing multiple operating systems and applications to run securely side-by-side on the same physical machine.

<>
Webpack flow
ReactJS+Webpack Structure
Babel Introdcution
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.

Recommended for you

cloud computing 5.pptx
cloud computing 5.pptxcloud computing 5.pptx
cloud computing 5.pptx

The document discusses cloud computing, including what it is, its key benefits and challenges, and popular cloud platforms. Cloud computing is defined as storing and accessing data and computing services over the Internet rather than on local hardware. It allows on-demand access to computer resources like servers, storage, databases and networks. The main types of cloud include public, private and hybrid clouds, while the main service models are Infrastructure as a Service (IaaS), Platform as a Service (PaaS), and Software as a Service (SaaS). Popular applications of cloud computing include education, banking, gaming, healthcare and more. Key benefits include scalability, cost savings, flexibility and reliability, while challenges include reduced control, security/privacy

Red Hat Openshift Fundamentals.pptx
Red Hat Openshift Fundamentals.pptxRed Hat Openshift Fundamentals.pptx
Red Hat Openshift Fundamentals.pptx

Here are the key steps to create an application from the catalog in the OpenShift web console: 1. Click on "Add to Project" on the top navigation bar and select "Browse Catalog". 2. This will open the catalog page showing available templates. You can search for a template or browse by category. 3. Select the template you want to use, for example Node.js. 4. On the next page you can review the template details and parameters. Fill in any required parameters. 5. Click "Create" to instantiate the template and create the application resources in your current project. 6. OpenShift will then provision the application, including building container images if required.

Private cloud
Private cloudPrivate cloud
Private cloud

This document discusses Microsoft's private cloud solutions, including Hyper-V for infrastructure as a service (IaaS) and Windows Azure Appliance for platform as a service (PaaS). It provides an overview of what a private cloud is and the benefits it offers over public clouds. It also outlines Microsoft's approach to building private clouds using Windows Server 2008 R2 Hyper-V for virtualization, System Center for management, and the Windows Azure Appliance for PaaS capabilities. Resources and guidance are provided for organizations looking to build their own private clouds.

windowspaascloud
Environment Setup
Visual Studio 2015 with latest update
• https://blogs.msdn.microsoft.com/visualstudio/2015/06/10/javas
cript-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
WebPack Task Runner
• https://visualstudiogallery.msdn.microsoft.com/5497fd10-b1ba-
474c-8991-1438ae47012a
React Snippet Pack
• https://visualstudiogallery.msdn.microsoft.com/234d79e9-f0fd-
41e1-a926-850da8e8c7d7

Recommended for you

IBM WebSphere application server
IBM WebSphere application serverIBM WebSphere application server
IBM WebSphere application server

Här har ni en presentation om WebSphere Application Server. Titta närmare på området på dessa länkar: Application Infrastructure (http://www-03.ibm.com/software/products/sv/category/SW600) respektive Connectivity & Integration (http://www-03.ibm.com/software/products/sv/category/SW666).

waswebsphereibm
Introduction to virtualization
Introduction to virtualizationIntroduction to virtualization
Introduction to virtualization

This document provides an introduction to virtualization. It defines virtualization as running multiple operating systems simultaneously on the same machine in isolation. A hypervisor is a software layer that sits between hardware and guest operating systems, allowing resources to be shared. There are two main types of hypervisors - bare-metal and hosted. Virtualization provides benefits like consolidation, redundancy, legacy system support, migration and centralized management. Key types of virtualization include server, desktop, application, memory, storage and network virtualization. Popular virtualization vendors for each type are also listed.

virtualization
VMware Presentation
VMware PresentationVMware Presentation
VMware Presentation

Virtualization allows multiple operating systems and applications to run on the same physical server at the same time. This increases hardware utilization and flexibility while reducing IT costs. VMware virtualization solutions can reduce energy costs by 80% through server consolidation and powering down unused servers without affecting applications or users. Virtualization makes hardware resources independent of operating systems and applications, treating them as single unified units that can be more easily deployed, maintained, and supported.

vmwarevirtualizationi.t
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
[NPM]Webpack
• https://www.npmjs.com/package/webpack
• Project: npm install webpack --save-dev
• Global: npm install webpack –g
[NPM]webpack-notifier
• https://www.npmjs.com/package/webpack-notifier
• npm install --save-dev webpack-notifier
Webpack+Babel+React

Recommended for you

Cloud Computing: Virtualization
Cloud Computing: VirtualizationCloud Computing: Virtualization
Cloud Computing: Virtualization

- Virtualization allows multiple operating systems to run concurrently on a single physical machine by presenting each virtual operating system with a virtual hardware environment. A hypervisor manages access to the physical hardware resources and isolates the virtual machines. - Cloud computing extends virtualization by allowing virtual servers and other resources to be dynamically provisioned on demand from large shared computing infrastructure. This improves flexibility and allows users to pay only for resources that are consumed. - The hypervisor software manages the virtual machines and allocates physical resources to each one while isolating them from each other. Example hypervisors include VMware, Xen, and KVM. Virtualization improves hardware utilization and makes infrastructure more flexible and cost-effective.

cloud computing: virtualizationcloud computingcloud
VMware vSphere technical presentation
VMware vSphere technical presentationVMware vSphere technical presentation
VMware vSphere technical presentation

This document provides an overview of VMware virtualization solutions including ESXi, vSphere, and vCenter. It describes what virtualization and hypervisors are, lists VMware's product lines, and summarizes key features and capabilities of ESXi, vSphere, and vCenter such as centralized management, monitoring, high availability, and scalability.

vmware
Top 10 cloud service providers
Top 10 cloud service providersTop 10 cloud service providers
Top 10 cloud service providers

The document discusses the top 10 cloud service providers: 1. Amazon EC2 provides scalable computing resources that can be accessed over the internet and only pay for what is used. 2. Verizon offers vCloud Express which provides flexible and on-demand computing resources through an intuitive web console. 3. IBM provides private, hybrid, and public cloud solutions including infrastructure, platforms and software as a service. It then briefly describes each of the top 10 providers and their key cloud computing offerings.

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.
Webpack for React
• Webpack is a bundler. It'll take a bunch of loose Javascript files and
build a single file from the lot
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:
Babel-loader
• This package allows transpiling JavaScript files using Babel and
webpack. https://github.com/babel/babel-loader

Recommended for you

Introduction to Docker Containers - Docker Captain
Introduction to Docker Containers - Docker CaptainIntroduction to Docker Containers - Docker Captain
Introduction to Docker Containers - Docker Captain

This document provides an introduction to Docker. It begins with an overview of the shift from monolithic to microservices architecture and how Docker addresses the complexity problems that arise. Docker is described as a tool that packages applications and dependencies into standardized units called containers that can run on any Linux server. Key differences between Docker containers and traditional virtual machines are outlined. The document then covers Docker concepts like images, containers, and the Docker Engine. It demonstrates the Docker build, ship, and run workflow and introduces common Docker commands and tools.

docker captaindocker
Cloud Computing Introduction
Cloud Computing IntroductionCloud Computing Introduction
Cloud Computing Introduction

The document discusses different aspects of cloud computing including definitions, evolution, service and deployment models. It defines cloud computing as a technology that uses remote servers accessed via the internet to store, manage and access data rather than local drives. The evolution of cloud computing is traced from distributed systems to mainframe, cluster and grid computing. Modern concepts like virtualization, web 2.0 and utility computing enabled the emergence of cloud computing. The key service models of infrastructure as a service (IaaS), platform as a service (PaaS) and software as a service (SaaS) are explained along with their characteristics. The deployment models of public, private, hybrid and community clouds are also summarized.

cloud computing presentationslaschallenges of cloud computing
2015-11-07 01 Виталий Кравцов. Webpack: человеческий подход к разработке веб ...
2015-11-07 01 Виталий Кравцов. Webpack: человеческий подход к разработке веб ...2015-11-07 01 Виталий Кравцов. Webpack: человеческий подход к разработке веб ...
2015-11-07 01 Виталий Кравцов. Webpack: человеческий подход к разработке веб ...

Преимущества сборщика WebPack

it-субботники
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.
Collaborate with .net
MVC
• 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
Project Structure

Recommended for you

Современный фронтенд -- как не утонуть в море хайпа?
Современный фронтенд -- как не утонуть в море хайпа?Современный фронтенд -- как не утонуть в море хайпа?
Современный фронтенд -- как не утонуть в море хайпа?

Как не утонуть в море shim, polyfill, es5, es6, es7, traceur, babel, requirejs, commonjs, systemjs, browserify, webpack, jspm, gulp, grunt, bower, npm, nodejs, expressjs, polymer, angular, react, backbone, marionette, lodash, underscore, jquery,html5, css3, sass, less, vanillajs

commonjsrequirejssystemjs
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)

The document discusses the challenges of front-end development without proper tools and methodologies. It describes tag soup code that is difficult to read and maintain. It also discusses issues like duplicate code, global variables, lack of module loading and dependencies. The document then introduces concepts like package management, CSS preprocessors, JavaScript module loaders, transpilers and build tools that help address these issues. It argues these tools help create a foundation for building user interfaces and applications in a more efficient and sustainable way.

babeljavascriptreact.js
Современный фронтенд за 30 минут.
Современный фронтенд за 30 минут.Современный фронтенд за 30 минут.
Современный фронтенд за 30 минут.

SamaraJS 2015. Современный фронтенд за 30 минут. От простого к сложному: jquery, backbone, underscore/lodash, marionette, bower, requirejs, npm, commonjs, browserify, grunt/gulp, boilerplate, yeoman, webpack, es6/es7, jspm

babelbrowserifyexpressjs
package.json
Layout and View
ES6 to ES5(using Babel)
Advance Webpack

Recommended for you

Webpack integration
Webpack integrationWebpack integration
Webpack integration

Подводные камни, костыли и полученный опыт. В первую очередь, рассказ ориентирован на тех, кто хочет заменить сборку Грантом или Гальпом на вебпак. Я рассмотрю тонкости настройки и необычные проблемы, с которыми мы столкнулись, ибо стандартные ситуации хорошо описаны на просторах интернета.

webpackweb developmentjavascript
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17

Слайды доклада Дениса "Webpack: 7 бед — один ответ", MoscowJS 17

webpackjavascript
Как Webpack сделал меня счастливее
Как Webpack сделал меня счастливееКак Webpack сделал меня счастливее
Как Webpack сделал меня счастливее

#KharkivJS 2015, Харьков - Мои впечатления от Webpack. - Рассказ о его принципах работы. - Интересные фишки Webpack 1 и 2. - Что еще есть аналогичного и выводы.

conferencewebpackgrunt
Reference
• 設定開發React的環境
• 設定開發React的環境 - React Hot Loader
• Production optimization with React and Webpack
Q & A
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!

More Related Content

What's hot

introduction to cloudsim
introduction to cloudsimintroduction to cloudsim
introduction to cloudsim
Jassika
 
VMware Overview
VMware OverviewVMware Overview
VMware Overview
Madhu Bala
 
Hypervisor
HypervisorHypervisor
Hypervisor
kalpita surve
 
Virtualization.ppt
Virtualization.pptVirtualization.ppt
Virtualization.ppt
vishal choudhary
 
Paravirtualization
ParavirtualizationParavirtualization
Paravirtualization
Shahbaz Sidhu
 
History of virtualization
History of virtualizationHistory of virtualization
History of virtualization
maria azam
 
Cloud Native Application
Cloud Native ApplicationCloud Native Application
Cloud Native Application
VMUG IT
 
Virtual machine subhash gupta
Virtual machine subhash guptaVirtual machine subhash gupta
Virtual machine subhash gupta
Subhash Chandra Gupta
 
cloud computing 5.pptx
cloud computing 5.pptxcloud computing 5.pptx
cloud computing 5.pptx
Jatin673232
 
Red Hat Openshift Fundamentals.pptx
Red Hat Openshift Fundamentals.pptxRed Hat Openshift Fundamentals.pptx
Red Hat Openshift Fundamentals.pptx
ssuser18b1c6
 
Private cloud
Private cloudPrivate cloud
Private cloud
Wes Yanaga
 
IBM WebSphere application server
IBM WebSphere application serverIBM WebSphere application server
IBM WebSphere application server
IBM Sverige
 
Introduction to virtualization
Introduction to virtualizationIntroduction to virtualization
Introduction to virtualization
Sasikumar Thirumoorthy
 
VMware Presentation
VMware PresentationVMware Presentation
VMware Presentation
Emirates Computers
 
Cloud Computing: Virtualization
Cloud Computing: VirtualizationCloud Computing: Virtualization
Cloud Computing: Virtualization
Dr.Neeraj Kumar Pandey
 
VMware vSphere technical presentation
VMware vSphere technical presentationVMware vSphere technical presentation
VMware vSphere technical presentation
aleyeldean
 
Top 10 cloud service providers
Top 10 cloud service providersTop 10 cloud service providers
Top 10 cloud service providers
Vineet Garg
 
Introduction to Docker Containers - Docker Captain
Introduction to Docker Containers - Docker CaptainIntroduction to Docker Containers - Docker Captain
Introduction to Docker Containers - Docker Captain
Ajeet Singh Raina
 
Cloud Computing Introduction
Cloud Computing IntroductionCloud Computing Introduction
Cloud Computing Introduction
Vivek Shelke
 

What's hot (20)

introduction to cloudsim
introduction to cloudsimintroduction to cloudsim
introduction to cloudsim
 
VMware Overview
VMware OverviewVMware Overview
VMware Overview
 
Hypervisor
HypervisorHypervisor
Hypervisor
 
Virtualization.ppt
Virtualization.pptVirtualization.ppt
Virtualization.ppt
 
Paravirtualization
ParavirtualizationParavirtualization
Paravirtualization
 
History of virtualization
History of virtualizationHistory of virtualization
History of virtualization
 
Cloud Native Application
Cloud Native ApplicationCloud Native Application
Cloud Native Application
 
Was ist Docker?
Was ist Docker?Was ist Docker?
Was ist Docker?
 
Virtual machine subhash gupta
Virtual machine subhash guptaVirtual machine subhash gupta
Virtual machine subhash gupta
 
cloud computing 5.pptx
cloud computing 5.pptxcloud computing 5.pptx
cloud computing 5.pptx
 
Red Hat Openshift Fundamentals.pptx
Red Hat Openshift Fundamentals.pptxRed Hat Openshift Fundamentals.pptx
Red Hat Openshift Fundamentals.pptx
 
Private cloud
Private cloudPrivate cloud
Private cloud
 
IBM WebSphere application server
IBM WebSphere application serverIBM WebSphere application server
IBM WebSphere application server
 
Introduction to virtualization
Introduction to virtualizationIntroduction to virtualization
Introduction to virtualization
 
VMware Presentation
VMware PresentationVMware Presentation
VMware Presentation
 
Cloud Computing: Virtualization
Cloud Computing: VirtualizationCloud Computing: Virtualization
Cloud Computing: Virtualization
 
VMware vSphere technical presentation
VMware vSphere technical presentationVMware vSphere technical presentation
VMware vSphere technical presentation
 
Top 10 cloud service providers
Top 10 cloud service providersTop 10 cloud service providers
Top 10 cloud service providers
 
Introduction to Docker Containers - Docker Captain
Introduction to Docker Containers - Docker CaptainIntroduction to Docker Containers - Docker Captain
Introduction to Docker Containers - Docker Captain
 
Cloud Computing Introduction
Cloud Computing IntroductionCloud Computing Introduction
Cloud Computing Introduction
 

Viewers also liked

2015-11-07 01 Виталий Кравцов. Webpack: человеческий подход к разработке веб ...
2015-11-07 01 Виталий Кравцов. Webpack: человеческий подход к разработке веб ...2015-11-07 01 Виталий Кравцов. Webpack: человеческий подход к разработке веб ...
2015-11-07 01 Виталий Кравцов. Webpack: человеческий подход к разработке веб ...
Омские ИТ-субботники
 
Современный фронтенд -- как не утонуть в море хайпа?
Современный фронтенд -- как не утонуть в море хайпа?Современный фронтенд -- как не утонуть в море хайпа?
Современный фронтенд -- как не утонуть в море хайпа?
Vladimir Malyk
 
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)
Joseph Chiang
 
Современный фронтенд за 30 минут.
Современный фронтенд за 30 минут.Современный фронтенд за 30 минут.
Современный фронтенд за 30 минут.
Vladimir Malyk
 
Webpack integration
Webpack integrationWebpack integration
Webpack integration
Illia Zub
 
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17
MoscowJS
 
Как Webpack сделал меня счастливее
Как Webpack сделал меня счастливееКак Webpack сделал меня счастливее
Как Webpack сделал меня счастливее
Yaroslav Serhieiev
 
Webpack Tutorial, Uppsala JS
Webpack Tutorial, Uppsala JSWebpack Tutorial, Uppsala JS
Webpack Tutorial, Uppsala JS
Emil Öberg
 
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
JSib
 
Webpack Introduction
Webpack IntroductionWebpack Introduction
Webpack Introduction
Anjali Chawla
 
Webpack slides
Webpack slidesWebpack slides
Packing for the Web with Webpack
Packing for the Web with WebpackPacking for the Web with Webpack
Packing for the Web with Webpack
Thiago Temple
 
Webpack - просто о сложном
Webpack -  просто о сложномWebpack -  просто о сложном
Webpack - просто о сложном
Tatiana Sakharova
 
webpack: 7 бед - один ответ
webpack: 7 бед - один ответwebpack: 7 бед - один ответ
webpack: 7 бед - один ответ
Denis Izmaylov
 
Prism Navigation
Prism NavigationPrism Navigation
Prism Navigation
Eyal Vardi
 
Puzles C#
Puzles C#Puzles C#
Puzles C#
lantoli
 
ASP.NET MVC The Begining
ASP.NET MVC The BeginingASP.NET MVC The Begining
ASP.NET MVC The Begining
Simon Huang
 
Models
ModelsModels
Models
Eyal Vardi
 
Thiet ke co so du lieu
Thiet ke co so du lieuThiet ke co so du lieu
Thiet ke co so du lieu
ma giam gia
 
GraphQL With Relay Part Deux
GraphQL With Relay Part DeuxGraphQL With Relay Part Deux
GraphQL With Relay Part Deux
Brad Pillow
 

Viewers also liked (20)

2015-11-07 01 Виталий Кравцов. Webpack: человеческий подход к разработке веб ...
2015-11-07 01 Виталий Кравцов. Webpack: человеческий подход к разработке веб ...2015-11-07 01 Виталий Кравцов. Webpack: человеческий подход к разработке веб ...
2015-11-07 01 Виталий Кравцов. Webpack: человеческий подход к разработке веб ...
 
Современный фронтенд -- как не утонуть в море хайпа?
Современный фронтенд -- как не утонуть в море хайпа?Современный фронтенд -- как не утонуть в море хайпа?
Современный фронтенд -- как не утонуть в море хайпа?
 
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)
 
Современный фронтенд за 30 минут.
Современный фронтенд за 30 минут.Современный фронтенд за 30 минут.
Современный фронтенд за 30 минут.
 
Webpack integration
Webpack integrationWebpack integration
Webpack integration
 
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17
 
Как Webpack сделал меня счастливее
Как Webpack сделал меня счастливееКак Webpack сделал меня счастливее
Как Webpack сделал меня счастливее
 
Webpack Tutorial, Uppsala JS
Webpack Tutorial, Uppsala JSWebpack Tutorial, Uppsala JS
Webpack Tutorial, Uppsala JS
 
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
 
Webpack Introduction
Webpack IntroductionWebpack Introduction
Webpack Introduction
 
Webpack slides
Webpack slidesWebpack slides
Webpack slides
 
Packing for the Web with Webpack
Packing for the Web with WebpackPacking for the Web with Webpack
Packing for the Web with Webpack
 
Webpack - просто о сложном
Webpack -  просто о сложномWebpack -  просто о сложном
Webpack - просто о сложном
 
webpack: 7 бед - один ответ
webpack: 7 бед - один ответwebpack: 7 бед - один ответ
webpack: 7 бед - один ответ
 
Prism Navigation
Prism NavigationPrism Navigation
Prism Navigation
 
Puzles C#
Puzles C#Puzles C#
Puzles C#
 
ASP.NET MVC The Begining
ASP.NET MVC The BeginingASP.NET MVC The Begining
ASP.NET MVC The Begining
 
Models
ModelsModels
Models
 
Thiet ke co so du lieu
Thiet ke co so du lieuThiet ke co so du lieu
Thiet ke co so du lieu
 
GraphQL With Relay Part Deux
GraphQL With Relay Part DeuxGraphQL With Relay Part Deux
GraphQL With Relay Part Deux
 

Similar to DotNet MVC and webpack + Babel + react

Agile sites2
Agile sites2Agile sites2
Agile sites2
Michele Sciabarrà
 
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Shift Conference
 
Bundle your modules with Webpack
Bundle your modules with WebpackBundle your modules with Webpack
Bundle your modules with Webpack
Jake Peyser
 
Short-Training asp.net vNext
Short-Training asp.net vNextShort-Training asp.net vNext
Short-Training asp.net vNext
Betclic Everest Group Tech Team
 
Installing Webpack with React JS from Scratch.pdf
Installing Webpack with React JS from Scratch.pdfInstalling Webpack with React JS from Scratch.pdf
Installing Webpack with React JS from Scratch.pdf
Sufalam Technologies
 
Comparison of Java Web Application Frameworks
Comparison of Java Web Application FrameworksComparison of Java Web Application Frameworks
Comparison of Java Web Application Frameworks
Angelin R
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance Optimization
Chen-Tien Tsai
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
YounusS2
 
Introduction to ASP.NET 5
Introduction to ASP.NET 5Introduction to ASP.NET 5
Introduction to ASP.NET 5
mbaric
 
NA Developer Day - Taking your COBOL apps to Net & JVM
NA Developer Day - Taking your COBOL apps to Net & JVM NA Developer Day - Taking your COBOL apps to Net & JVM
NA Developer Day - Taking your COBOL apps to Net & JVM
Micro Focus
 
Webpack 살펴보기
Webpack 살펴보기Webpack 살펴보기
Webpack 살펴보기
Sangwon Lee
 
Java in a World of Containers - DockerCon 2018
Java in a World of Containers - DockerCon 2018Java in a World of Containers - DockerCon 2018
Java in a World of Containers - DockerCon 2018
Arun Gupta
 
Java in a world of containers
Java in a world of containersJava in a world of containers
Java in a world of containers
Docker, Inc.
 
001. Introduction about React
001. Introduction about React001. Introduction about React
001. Introduction about React
Binh Quan Duc
 
React on rails v6.1 at LA Ruby, November 2016
React on rails v6.1 at LA Ruby, November 2016React on rails v6.1 at LA Ruby, November 2016
React on rails v6.1 at LA Ruby, November 2016
Justin Gordon
 
ReactJS Workflows
ReactJS WorkflowsReactJS Workflows
ReactJS Workflows
Cem Arguvanlı
 
React Tech Salon
React Tech SalonReact Tech Salon
React Tech Salon
Chenguang ZHANG
 
JBoss, Rails and the cloud
JBoss, Rails and the cloudJBoss, Rails and the cloud
JBoss, Rails and the cloud
elliando dias
 
Full-Stack Development with Spring Boot and VueJS
Full-Stack Development with Spring Boot and VueJSFull-Stack Development with Spring Boot and VueJS
Full-Stack Development with Spring Boot and VueJS
VMware Tanzu
 
Lecture 19 - Dynamic Web - JAVA - Part 1.ppt
Lecture 19 - Dynamic Web - JAVA - Part 1.pptLecture 19 - Dynamic Web - JAVA - Part 1.ppt
Lecture 19 - Dynamic Web - JAVA - Part 1.ppt
KalsoomTahir2
 

Similar to DotNet MVC and webpack + Babel + react (20)

Agile sites2
Agile sites2Agile sites2
Agile sites2
 
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
 
Bundle your modules with Webpack
Bundle your modules with WebpackBundle your modules with Webpack
Bundle your modules with Webpack
 
Short-Training asp.net vNext
Short-Training asp.net vNextShort-Training asp.net vNext
Short-Training asp.net vNext
 
Installing Webpack with React JS from Scratch.pdf
Installing Webpack with React JS from Scratch.pdfInstalling Webpack with React JS from Scratch.pdf
Installing Webpack with React JS from Scratch.pdf
 
Comparison of Java Web Application Frameworks
Comparison of Java Web Application FrameworksComparison of Java Web Application Frameworks
Comparison of Java Web Application Frameworks
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance Optimization
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Introduction to ASP.NET 5
Introduction to ASP.NET 5Introduction to ASP.NET 5
Introduction to ASP.NET 5
 
NA Developer Day - Taking your COBOL apps to Net & JVM
NA Developer Day - Taking your COBOL apps to Net & JVM NA Developer Day - Taking your COBOL apps to Net & JVM
NA Developer Day - Taking your COBOL apps to Net & JVM
 
Webpack 살펴보기
Webpack 살펴보기Webpack 살펴보기
Webpack 살펴보기
 
Java in a World of Containers - DockerCon 2018
Java in a World of Containers - DockerCon 2018Java in a World of Containers - DockerCon 2018
Java in a World of Containers - DockerCon 2018
 
Java in a world of containers
Java in a world of containersJava in a world of containers
Java in a world of containers
 
001. Introduction about React
001. Introduction about React001. Introduction about React
001. Introduction about React
 
React on rails v6.1 at LA Ruby, November 2016
React on rails v6.1 at LA Ruby, November 2016React on rails v6.1 at LA Ruby, November 2016
React on rails v6.1 at LA Ruby, November 2016
 
ReactJS Workflows
ReactJS WorkflowsReactJS Workflows
ReactJS Workflows
 
React Tech Salon
React Tech SalonReact Tech Salon
React Tech Salon
 
JBoss, Rails and the cloud
JBoss, Rails and the cloudJBoss, Rails and the cloud
JBoss, Rails and the cloud
 
Full-Stack Development with Spring Boot and VueJS
Full-Stack Development with Spring Boot and VueJSFull-Stack Development with Spring Boot and VueJS
Full-Stack Development with Spring Boot and VueJS
 
Lecture 19 - Dynamic Web - JAVA - Part 1.ppt
Lecture 19 - Dynamic Web - JAVA - Part 1.pptLecture 19 - Dynamic Web - JAVA - Part 1.ppt
Lecture 19 - Dynamic Web - JAVA - Part 1.ppt
 

More from Chen-Tien Tsai

關於軟體工程師職涯的那些事
關於軟體工程師職涯的那些事關於軟體工程師職涯的那些事
關於軟體工程師職涯的那些事
Chen-Tien Tsai
 
Artifacts management with CI and CD
Artifacts management with CI and CDArtifacts management with CI and CD
Artifacts management with CI and CD
Chen-Tien Tsai
 
.NET Security Application/Web Development - Part IV
.NET Security Application/Web Development - Part IV.NET Security Application/Web Development - Part IV
.NET Security Application/Web Development - Part IV
Chen-Tien Tsai
 
.NET Security Application/Web Development - Part III
.NET Security Application/Web Development - Part III.NET Security Application/Web Development - Part III
.NET Security Application/Web Development - Part III
Chen-Tien Tsai
 
.NET Security Application/Web Development - Part II
.NET Security Application/Web Development - Part II.NET Security Application/Web Development - Part II
.NET Security Application/Web Development - Part II
Chen-Tien Tsai
 
.NET Security Application/Web Development - Part I
.NET Security Application/Web Development - Part I.NET Security Application/Web Development - Part I
.NET Security Application/Web Development - Part I
Chen-Tien Tsai
 
.NET Security Application/Web Development - Overview
.NET Security Application/Web Development - Overview.NET Security Application/Web Development - Overview
.NET Security Application/Web Development - Overview
Chen-Tien Tsai
 
Designing distributedsystems cht6
Designing distributedsystems cht6Designing distributedsystems cht6
Designing distributedsystems cht6
Chen-Tien Tsai
 
Reactive application with akka.NET & .NET Core
Reactive application with akka.NET & .NET CoreReactive application with akka.NET & .NET Core
Reactive application with akka.NET & .NET Core
Chen-Tien Tsai
 
The Cloud - What's different
The Cloud - What's differentThe Cloud - What's different
The Cloud - What's different
Chen-Tien Tsai
 
How to be a professional speaker
How to be a professional speakerHow to be a professional speaker
How to be a professional speaker
Chen-Tien Tsai
 
Agile tutorial
Agile tutorialAgile tutorial
Agile tutorial
Chen-Tien Tsai
 
響應式程式開發之 .NET Core 應用 
響應式程式開發之 .NET Core 應用 響應式程式開發之 .NET Core 應用 
響應式程式開發之 .NET Core 應用 
Chen-Tien Tsai
 
Artifacts management with DevOps
Artifacts management with DevOpsArtifacts management with DevOps
Artifacts management with DevOps
Chen-Tien Tsai
 
Web optimization with service woker
Web optimization with service wokerWeb optimization with service woker
Web optimization with service woker
Chen-Tien Tsai
 
GCPUG.TW Meetup #25 - ASP.NET Core with GCP
GCPUG.TW Meetup #25 - ASP.NET Core with GCPGCPUG.TW Meetup #25 - ASP.NET Core with GCP
GCPUG.TW Meetup #25 - ASP.NET Core with GCP
Chen-Tien Tsai
 
.NET Study Group - ASP.NET Core with GCP
.NET Study Group - ASP.NET Core with GCP.NET Study Group - ASP.NET Core with GCP
.NET Study Group - ASP.NET Core with GCP
Chen-Tien Tsai
 
Website Auto scraping with Autoit and .Net HttpRequest
Website Auto scraping with Autoit and .Net HttpRequestWebsite Auto scraping with Autoit and .Net HttpRequest
Website Auto scraping with Autoit and .Net HttpRequest
Chen-Tien Tsai
 
C# 2 to 5 short Introduction
C# 2 to 5 short IntroductionC# 2 to 5 short Introduction
C# 2 to 5 short Introduction
Chen-Tien Tsai
 
Docker - fundamental
Docker  - fundamentalDocker  - fundamental
Docker - fundamental
Chen-Tien Tsai
 

More from Chen-Tien Tsai (20)

關於軟體工程師職涯的那些事
關於軟體工程師職涯的那些事關於軟體工程師職涯的那些事
關於軟體工程師職涯的那些事
 
Artifacts management with CI and CD
Artifacts management with CI and CDArtifacts management with CI and CD
Artifacts management with CI and CD
 
.NET Security Application/Web Development - Part IV
.NET Security Application/Web Development - Part IV.NET Security Application/Web Development - Part IV
.NET Security Application/Web Development - Part IV
 
.NET Security Application/Web Development - Part III
.NET Security Application/Web Development - Part III.NET Security Application/Web Development - Part III
.NET Security Application/Web Development - Part III
 
.NET Security Application/Web Development - Part II
.NET Security Application/Web Development - Part II.NET Security Application/Web Development - Part II
.NET Security Application/Web Development - Part II
 
.NET Security Application/Web Development - Part I
.NET Security Application/Web Development - Part I.NET Security Application/Web Development - Part I
.NET Security Application/Web Development - Part I
 
.NET Security Application/Web Development - Overview
.NET Security Application/Web Development - Overview.NET Security Application/Web Development - Overview
.NET Security Application/Web Development - Overview
 
Designing distributedsystems cht6
Designing distributedsystems cht6Designing distributedsystems cht6
Designing distributedsystems cht6
 
Reactive application with akka.NET & .NET Core
Reactive application with akka.NET & .NET CoreReactive application with akka.NET & .NET Core
Reactive application with akka.NET & .NET Core
 
The Cloud - What's different
The Cloud - What's differentThe Cloud - What's different
The Cloud - What's different
 
How to be a professional speaker
How to be a professional speakerHow to be a professional speaker
How to be a professional speaker
 
Agile tutorial
Agile tutorialAgile tutorial
Agile tutorial
 
響應式程式開發之 .NET Core 應用 
響應式程式開發之 .NET Core 應用 響應式程式開發之 .NET Core 應用 
響應式程式開發之 .NET Core 應用 
 
Artifacts management with DevOps
Artifacts management with DevOpsArtifacts management with DevOps
Artifacts management with DevOps
 
Web optimization with service woker
Web optimization with service wokerWeb optimization with service woker
Web optimization with service woker
 
GCPUG.TW Meetup #25 - ASP.NET Core with GCP
GCPUG.TW Meetup #25 - ASP.NET Core with GCPGCPUG.TW Meetup #25 - ASP.NET Core with GCP
GCPUG.TW Meetup #25 - ASP.NET Core with GCP
 
.NET Study Group - ASP.NET Core with GCP
.NET Study Group - ASP.NET Core with GCP.NET Study Group - ASP.NET Core with GCP
.NET Study Group - ASP.NET Core with GCP
 
Website Auto scraping with Autoit and .Net HttpRequest
Website Auto scraping with Autoit and .Net HttpRequestWebsite Auto scraping with Autoit and .Net HttpRequest
Website Auto scraping with Autoit and .Net HttpRequest
 
C# 2 to 5 short Introduction
C# 2 to 5 short IntroductionC# 2 to 5 short Introduction
C# 2 to 5 short Introduction
 
Docker - fundamental
Docker  - fundamentalDocker  - fundamental
Docker - fundamental
 

Recently uploaded

Safe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work PermitsSafe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work Permits
sheqnetworkmarketing
 
Attendance Tracking From Paper To Digital
Attendance Tracking From Paper To DigitalAttendance Tracking From Paper To Digital
Attendance Tracking From Paper To Digital
Task Tracker
 
Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...
Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...
Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...
Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg
 
dachnug51 - All you ever wanted to know about domino licensing.pdf
dachnug51 - All you ever wanted to know about domino licensing.pdfdachnug51 - All you ever wanted to know about domino licensing.pdf
dachnug51 - All you ever wanted to know about domino licensing.pdf
DNUG e.V.
 
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
avufu
 
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTIONBITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
ssuser2b426d1
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
shivamt017
 
NYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdfNYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdf
AUGNYC
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
sofiafernandezon
 
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
onemonitarsoftware
 
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptxAddressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
Sparity1
 
dachnug51 - Whats new in domino 14 .pdf
dachnug51 - Whats new in domino 14  .pdfdachnug51 - Whats new in domino 14  .pdf
dachnug51 - Whats new in domino 14 .pdf
DNUG e.V.
 
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdfdachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
DNUG e.V.
 
Break data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud ConnectorsBreak data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud Connectors
confluent
 
Leading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptxLeading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptx
taskroupseo
 
Google ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learningGoogle ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learning
VishrutGoyani1
 
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
Roshan Dwivedi
 
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
Hironori Washizaki
 
introduction of Ansys software and basic and advance knowledge of modelling s...
introduction of Ansys software and basic and advance knowledge of modelling s...introduction of Ansys software and basic and advance knowledge of modelling s...
introduction of Ansys software and basic and advance knowledge of modelling s...
sachin chaurasia
 
A Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdfA Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdf
kalichargn70th171
 

Recently uploaded (20)

Safe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work PermitsSafe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work Permits
 
Attendance Tracking From Paper To Digital
Attendance Tracking From Paper To DigitalAttendance Tracking From Paper To Digital
Attendance Tracking From Paper To Digital
 
Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...
Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...
Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...
 
dachnug51 - All you ever wanted to know about domino licensing.pdf
dachnug51 - All you ever wanted to know about domino licensing.pdfdachnug51 - All you ever wanted to know about domino licensing.pdf
dachnug51 - All you ever wanted to know about domino licensing.pdf
 
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
 
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTIONBITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
 
NYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdfNYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdf
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
 
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
 
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptxAddressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
 
dachnug51 - Whats new in domino 14 .pdf
dachnug51 - Whats new in domino 14  .pdfdachnug51 - Whats new in domino 14  .pdf
dachnug51 - Whats new in domino 14 .pdf
 
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdfdachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
 
Break data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud ConnectorsBreak data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud Connectors
 
Leading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptxLeading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptx
 
Google ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learningGoogle ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learning
 
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
 
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
 
introduction of Ansys software and basic and advance knowledge of modelling s...
introduction of Ansys software and basic and advance knowledge of modelling s...introduction of Ansys software and basic and advance knowledge of modelling s...
introduction of Ansys software and basic and advance knowledge of modelling s...
 
A Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdfA Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdf
 

DotNet MVC and webpack + Babel + react

  • 1. Webpack & Babel Sharing Blackie.Tsai Blackie.tsai@xuenn.com 2016/9/20
  • 2. Agenda • Modularized Javascript • Webpack Introduction • Babel Introdcution • Visual Studio Setup • Collaborate with .net MVC • Web Optimize
  • 4. Modularized JavaScript • Pros • Encapsulation • Decoupling • Organization • No global scope pollution • Security • Re-use • Cons • More difficult to release • Complex dependency
  • 7. 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/
  • 8. 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.
  • 12. 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.
  • 14. Visual Studio 2015 with latest update • https://blogs.msdn.microsoft.com/visualstudio/2015/06/10/javas cript-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
  • 15. WebPack Task Runner • https://visualstudiogallery.msdn.microsoft.com/5497fd10-b1ba- 474c-8991-1438ae47012a
  • 16. React Snippet Pack • https://visualstudiogallery.msdn.microsoft.com/234d79e9-f0fd- 41e1-a926-850da8e8c7d7
  • 17. 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
  • 18. [NPM]Webpack • https://www.npmjs.com/package/webpack • Project: npm install webpack --save-dev • Global: npm install webpack –g
  • 21. 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.
  • 22. Webpack for React • Webpack is a bundler. It'll take a bunch of loose Javascript files and build a single file from the lot
  • 23. 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:
  • 24. Babel-loader • This package allows transpiling JavaScript files using Babel and webpack. https://github.com/babel/babel-loader
  • 25. 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.
  • 27. • 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
  • 33. Reference • 設定開發React的環境 • 設定開發React的環境 - React Hot Loader • Production optimization with React and Webpack
  • 34. Q & A
  • 35. 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!