SlideShare ist ein Scribd-Unternehmen logo
1 von 44
Angular 4 / Webpack/
Yarn in JHipster
Sendil Kumar N
Sendil Kumar N
Developer | JHipster ngx lead
@sendilkumarn
https://sendilkumarn.js.org
About you
Anyone using Typescript ?
Anyone using Angular ?
Have you used JHipster before ?
JHipster
https://jhipster.github.io
+ =
Architecture
Options
Monolithic
Application
Microservices
Devops ( CI-CD )
Deployment Options
Code Time
Lets create an application
Tools - JDL Studio
Code Time
Lets spin up some entities...
NG1
Builders View Testers
Client Side
NGx
Server
Side
Developed for developers
by developers, to enrich
developer experience...
Migrating from
AngularJs to Angular
1.x 4.x
Angular
TypeScript
Javascript that scales
Typed superset of JS
Compiles to pure JS
Use latest syntax worry free
TypeScript
Controller to Component
1.x 4.x
Service Migration
1.x 4.x
Angular Router
Based on Browser model
Easier to do lazy loading
More workarounds were needed.
Webpack
Why Webpack
Webpack - an overview
Entry Output
Plugins
Loaders
Webpack Bundling
Compiles & Bundles app into static assets
Lot of plugins and options
Code Time
Switch to demo mode...
Yar
n
Yarn
Time in seconds
Bootstrap
Sass
Browsersync
Karma
Testing
Karma based testing
In TypeScript
Protractor testing
Few tricks
Distance yourself from DOM
Use AOT for super-minified JS
Use lazy loading
Browsersync for better development experience
Careful about library migration
Code Time
Switch to demo mode...
Whats Next ?
Questions?
Thank You

Weitere ähnliche Inhalte

Was ist angesagt?

React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigiReact Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
Yukiya Nakagawa
 
2015 05-06-karsten gaebert-akademie-etrainings
2015 05-06-karsten gaebert-akademie-etrainings2015 05-06-karsten gaebert-akademie-etrainings
2015 05-06-karsten gaebert-akademie-etrainings
Haufe-Lexware GmbH & Co KG
 
ぼくがかんがえたさいきょうのクリーンアーキテクチャ部分適応
ぼくがかんがえたさいきょうのクリーンアーキテクチャ部分適応ぼくがかんがえたさいきょうのクリーンアーキテクチャ部分適応
ぼくがかんがえたさいきょうのクリーンアーキテクチャ部分適応
Kenji Tanaka
 

Was ist angesagt? (20)

Swagger code motion talk
Swagger code motion talkSwagger code motion talk
Swagger code motion talk
 
React native: building native iOS apps with javascript
React native: building native iOS apps with javascriptReact native: building native iOS apps with javascript
React native: building native iOS apps with javascript
 
Continuous delivery@LesFurets - DC Continuous delivery meetup
Continuous delivery@LesFurets - DC Continuous delivery meetupContinuous delivery@LesFurets - DC Continuous delivery meetup
Continuous delivery@LesFurets - DC Continuous delivery meetup
 
Continuous Deployment with Kubernetes, Docker and GitLab CI
Continuous Deployment with Kubernetes, Docker and GitLab CIContinuous Deployment with Kubernetes, Docker and GitLab CI
Continuous Deployment with Kubernetes, Docker and GitLab CI
 
Red Hat OpenShift App Dev meetup - Operator SDK
Red Hat OpenShift App Dev meetup - Operator SDK Red Hat OpenShift App Dev meetup - Operator SDK
Red Hat OpenShift App Dev meetup - Operator SDK
 
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigiReact Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
 
2015 05-06-karsten gaebert-akademie-etrainings
2015 05-06-karsten gaebert-akademie-etrainings2015 05-06-karsten gaebert-akademie-etrainings
2015 05-06-karsten gaebert-akademie-etrainings
 
React native-meetup-talk
React native-meetup-talkReact native-meetup-talk
React native-meetup-talk
 
React.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOMReact.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOM
 
Stripe con 2021 UI stack
Stripe con 2021 UI stackStripe con 2021 UI stack
Stripe con 2021 UI stack
 
CI/CD with GitHub Actions
CI/CD with GitHub ActionsCI/CD with GitHub Actions
CI/CD with GitHub Actions
 
Silverstripe CMS 4.9.0 release and beyound
Silverstripe CMS 4.9.0 release and beyoundSilverstripe CMS 4.9.0 release and beyound
Silverstripe CMS 4.9.0 release and beyound
 
React in production (react global summit 2021)
React in production (react global summit 2021)React in production (react global summit 2021)
React in production (react global summit 2021)
 
Gradle
GradleGradle
Gradle
 
Helm at reddit: from local dev, staging, to production
Helm at reddit: from local dev, staging, to productionHelm at reddit: from local dev, staging, to production
Helm at reddit: from local dev, staging, to production
 
CICD Pipeline Using Github Actions
CICD Pipeline Using Github ActionsCICD Pipeline Using Github Actions
CICD Pipeline Using Github Actions
 
Why you can't ignore GitLab
Why you can't ignore GitLabWhy you can't ignore GitLab
Why you can't ignore GitLab
 
High Performance NodeJS
High Performance NodeJSHigh Performance NodeJS
High Performance NodeJS
 
FOSDEM 2017: GitLab CI
FOSDEM 2017:  GitLab CIFOSDEM 2017:  GitLab CI
FOSDEM 2017: GitLab CI
 
ぼくがかんがえたさいきょうのクリーンアーキテクチャ部分適応
ぼくがかんがえたさいきょうのクリーンアーキテクチャ部分適応ぼくがかんがえたさいきょうのクリーンアーキテクチャ部分適応
ぼくがかんがえたさいきょうのクリーンアーキテクチャ部分適応
 

Ähnlich wie ng4 webpack and yarn in JHipster

Ähnlich wie ng4 webpack and yarn in JHipster (20)

Angular, ASP.NET Core, and Visual Studio Code - Oh My!
Angular, ASP.NET Core, and Visual Studio Code - Oh My!Angular, ASP.NET Core, and Visual Studio Code - Oh My!
Angular, ASP.NET Core, and Visual Studio Code - Oh My!
 
ATAGTR2017 Protractor Cucumber BDD Approach
ATAGTR2017 Protractor Cucumber BDD ApproachATAGTR2017 Protractor Cucumber BDD Approach
ATAGTR2017 Protractor Cucumber BDD Approach
 
When to use Serverless? When to use Kubernetes?
When to use Serverless? When to use Kubernetes?When to use Serverless? When to use Kubernetes?
When to use Serverless? When to use Kubernetes?
 
Angular4 getting started
Angular4 getting startedAngular4 getting started
Angular4 getting started
 
Angular2.0@Shanghai0319
Angular2.0@Shanghai0319Angular2.0@Shanghai0319
Angular2.0@Shanghai0319
 
Angular 2.0
Angular  2.0Angular  2.0
Angular 2.0
 
Ultimate Guide to Microservice Architecture on Kubernetes
Ultimate Guide to Microservice Architecture on KubernetesUltimate Guide to Microservice Architecture on Kubernetes
Ultimate Guide to Microservice Architecture on Kubernetes
 
Reason to choose Angular JS for your Web Application
Reason to choose Angular JS for your Web ApplicationReason to choose Angular JS for your Web Application
Reason to choose Angular JS for your Web Application
 
Quick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developersQuick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developers
 
Modern Web-site Development Pipeline
Modern Web-site Development PipelineModern Web-site Development Pipeline
Modern Web-site Development Pipeline
 
Automate NGINX with DevOps Tools
Automate NGINX with DevOps ToolsAutomate NGINX with DevOps Tools
Automate NGINX with DevOps Tools
 
GCP Meetup #3 - Approaches to Cloud Native Architectures
GCP Meetup #3 - Approaches to Cloud Native ArchitecturesGCP Meetup #3 - Approaches to Cloud Native Architectures
GCP Meetup #3 - Approaches to Cloud Native Architectures
 
SpringOne Platform 2018 Recap in 5 minutes
SpringOne Platform 2018 Recap in 5 minutesSpringOne Platform 2018 Recap in 5 minutes
SpringOne Platform 2018 Recap in 5 minutes
 
Kunal bhatia resume mass
Kunal bhatia   resume massKunal bhatia   resume mass
Kunal bhatia resume mass
 
Web componenet using angular element
Web componenet using angular elementWeb componenet using angular element
Web componenet using angular element
 
Aws Deployment Tools - Overview, Details, Implementation
Aws Deployment Tools - Overview, Details, ImplementationAws Deployment Tools - Overview, Details, Implementation
Aws Deployment Tools - Overview, Details, Implementation
 
Microservices at Mercari
Microservices at MercariMicroservices at Mercari
Microservices at Mercari
 
Griffon for the Enterprise
Griffon for the EnterpriseGriffon for the Enterprise
Griffon for the Enterprise
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
ASP .Net Core SPA Templates
ASP .Net Core SPA TemplatesASP .Net Core SPA Templates
ASP .Net Core SPA Templates
 

Kürzlich hochgeladen

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Kürzlich hochgeladen (20)

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 

ng4 webpack and yarn in JHipster

Hinweis der Redaktion

  1. What we require in modern web app You can solve by adding front end and backend separately but amt of work? Increase dev ex app will have more user exp
  2. Angular library itself written on typescript. That enables seamless integration when you write in typescript. One thing to note here is you do have an option, to use things like JS / Dart. But it has its own limits. In case of JS, you have to make sure that you write in ES5/6, which has a lot of boilerplate code. Code is inturn converted into JS (ES3-5) but it is the job of the transpiler.
  3. Angular library itself written on typescript. That enables seamless integration when you write in typescript. One thing to note here is you do have an option, to use things like JS / Dart. But it has its own limits. In case of JS, you have to make sure that you write in ES5/6, which has a lot of boilerplate code. Code is inturn converted into JS (ES3-5) but it is the job of the transpiler.
  4. Much cleaner, readable aligned code.
  5. Few Hacks for example pop up routing. Populating page title.