Multi modularized project setup with gulp, typescript and angular.js
10 likes10,781 views
The document discusses setting up a multi-module build process for an Angular and TypeScript application with Gulp at DAB Bank. It describes challenges with their initial Grunt-based approach and outlines their new Gulp-based solution using a common setup module to define shared build tasks and provide a base configuration. It also covers managing dependencies between files and modules through Angular's module system and TypeScript's module syntax.
1 of 52
Downloaded 53 times
![common-setup-module gulpfile
module.exports = function ( gulp, CONFIG) {
gulp.task("default", ["dev"]);
gulp.task("prod:once", ["prod"]);
gulp.task("prod", ["prod:tscompile", "templates"]);
gulp.task("dev", ["dev:once", "webserver", "watch"]);
…
gulp.task("js-app", function () {
gulp.src(CONFIG.SRC.TS.FILES())
.pipe(partials.errorPipe())
.pipe(plugins.concat( CONFIG.DIST.JS.FILES.APP()))
.pipe(gulp.dest( CONFIG.DIST.JS.FOLDER()));
});](https://image.slidesharecdn.com/gulpmultiprojectenterprisetemplate-141204063035-conversion-gate01/85/Multi-modularized-project-setup-with-gulp-typescript-and-angular-js-11-320.jpg)
![Single Point of Dependency Wiring
/app
applicationContext.js
angular.module(‘de.dab.pfm.app’, [‘de.dab.pfm.dashboard’]);
angular.module(‘de.dab.pfm.dashboard’, [‘de.dab.pfm.dashboard.header’]);
angular.module(‘de.dab.pfm.dashboard.header’, [‘de.dab.pfm.dashboard.
intro’,‘de.dab.shared.pieChart‘]);
angular.module(‘de.dab.pfm.dashboard.intro’, [‘...’]);
angular.module(‘de.dab.shared.pieChart’, [‘...’]);
Registration](https://image.slidesharecdn.com/gulpmultiprojectenterprisetemplate-141204063035-conversion-gate01/85/Multi-modularized-project-setup-with-gulp-typescript-and-angular-js-19-320.jpg)
![Cross File Dependency Solution
1. Concat
→ cross file dependencies managed by angular.module
2. TypeScript innerModules
module de.dab.myproject{
import MyType = de.dab.IMyType;
}
IMytype.d.ts
declare module de.dab {
interface IMyType {
id: string;
accounts : IAccount[];
}](https://image.slidesharecdn.com/gulpmultiprojectenterprisetemplate-141204063035-conversion-gate01/85/Multi-modularized-project-setup-with-gulp-typescript-and-angular-js-26-320.jpg)
Ad
Recommended
A Story about AngularJS modularization development
A Story about AngularJS modularization developmentJohannes Weber The document discusses a presentation on AngularJS modularization at a Munich meetup, focusing on managing cross-file dependencies and loading scripts efficiently. It covers techniques such as using AMD for asynchronous loading, dependency injection, and module registration to avoid polluting the global namespace, as well as the transition to AngularJS 2.0 with ES6 modules. Overall, it highlights best practices for structuring Angular applications for better development and production environments.
Angular 2 : learn TypeScript already with Angular 1
Angular 2 : learn TypeScript already with Angular 1David Amend TypeScript can be used to add types to JavaScript for better integration with IDEs and refactoring support. It allows defining interfaces to support modular projects and combining client and server models. Key things to know about TypeScript include interfaces, decorators, module support, and ES6 features. There are many benefits to using TypeScript like refactoring support, code exploration, and self-documentation.
Story about module management with angular.js
Story about module management with angular.jsDavid Amend The document discusses techniques for managing dependencies in AngularJS applications during a Munich meetup. It compares methods such as script tags and AMD (Asynchronous Module Definition) for handling cross-file dependencies, async loading, and module registration, while also addressing issues like polluting the global namespace and differentiating development from production builds. It concludes with considerations for future Angular versions, including AngularJS 2.0, and the integration of ES6 features.
Performance monitoring measurement angualrjs single page apps with phantomas
Performance monitoring measurement angualrjs single page apps with phantomasDavid Amend Phantomas is a tool for monitoring web performance and Angular.js applications. It passively monitors performance through a JavaScript virtual machine and Node.js. It generates reports on metrics like requests, assets, DOM complexity, and events in JSON, CSV, TAP, and other formats. It has an easy setup through Grunt and focuses only on frontend performance without network latency.
Angular js best practice
Angular js best practiceMatteo Scandolo This document outlines best practices for AngularJS development in enterprise environments, particularly for distributed teams. It emphasizes the importance of planning, documentation, coding standards, testing, and continuous integration, providing specific tools and methodologies for each aspect. Key recommendations include using style guides, automating code quality checks, and maintaining effective team communication to enhance code maintainability and project success.
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용NAVER D2 The document discusses ways to improve the performance of hybrid mobile applications that use WebView. It describes how WebView has less powerful capabilities and worse web standard compatibility compared to mobile browsers. This can cause issues like fragmentation across device versions.
The document proposes techniques for creating a high-performance WebView, including adding new capabilities like WebSockets, and replacing slower native elements like Canvas 2D with optimized custom implementations. It provides code examples for calling JavaScript from native and vice versa on Android and iOS. Lessons learned emphasize minimizing native/JavaScript communication and dealing with threading issues.
Angular 2 어디까지 왔을까
Angular 2 어디까지 왔을까장현 한 Angular 2 진행 상황과 장애물에 대해 설명했다. 주요 장애물은 빠른 변화, 새로운 개발 언어와 도구의 사용, 문법의 변화 등이 있다. 반면 Angular 2의 장점은 성능 향상, 체계적인 개발 방식 지원 등이 있다. 결론적으로 Angular 2는 아직 사용하기 이르나, 향후 주
Real World AngularJS recipes: beyond TodoMVC
Real World AngularJS recipes: beyond TodoMVCCarlo Bonamico This document summarizes a presentation on best practices for developing real world applications with AngularJS. It discusses topics like modularizing the app using modules, organizing source code into features, writing small focused controllers, using services for collaboration between controllers, when to use directives, authentication and authorization, logging, packaging for different environments, and testing Angular apps. References and resources are also provided.
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and moreAri Lerner The document discusses AngularJS, highlighting its features as a powerful front-end framework supported by Google, focusing on best practices for development and maintainability. It emphasizes the importance of modularizing code, using tools like Browserify and Gulp, and implementing testing strategies to ensure code quality. The author, Ari Lerner, also shares resources for further learning and engagement within the Angular community.
Zukunftssichere Anwendungen mit AngularJS 1.x entwickeln (GDG DevFest Karlsru...
Zukunftssichere Anwendungen mit AngularJS 1.x entwickeln (GDG DevFest Karlsru...Christian Janz The document discusses the development of future-proof applications using AngularJS 1.x, emphasizing its continued relevance during the transition to Angular 2. It outlines key improvements in Angular 2, such as a new template syntax, improved dependency injection, and a component-based architecture while noting that Angular 1.x remains viable for production applications. Migration strategies and refactoring patterns from AngularJS to Angular 2 are also presented, highlighting how features from Angular 2 can be integrated into existing AngularJS applications.
Angular based enterprise level frontend architecture
Angular based enterprise level frontend architectureHimanshu Tamrakar This document discusses different frontend architectures for Angular applications:
1. Using npm packages to create and distribute libraries that can be installed and used by other applications.
2. Implementing a mono repo architecture where related projects share a single code repository and node_modules folder.
3. Developing applications using a micro frontend architecture where features are developed as separate modules that can be independently deployed.
The document compares the advantages and disadvantages of each approach and provides examples of how to implement them using Angular CLI or Nx.
Angular Lazy Loading and Resolve (Route Resolver)
Angular Lazy Loading and Resolve (Route Resolver)Squash Apps Pvt Ltd Lazy loading allows modules to be loaded on demand instead of all at once on initial load to improve performance. It is implemented using loadChildren and routing modules. PreloadingStrategy can be used to preload routes. Resolve allows fetching data before navigating to a route by implementing the Resolve interface and adding it to routes. This improves the user experience by having data ready when the component loads.
Angular js
Angular jsKnoldus Inc. AngularJS is an open-source JavaScript framework developed by Google for building single-page applications, enhancing browser-based applications with MVC architecture. Key features include two-way data binding, deep linking, and a rich set of directives, which make it easier to create dynamic user interfaces. The document outlines how to set up an AngularJS application, use its core capabilities, and manage dependencies and project structure with tools like Yeoman, Grunt, and Bower.
Introduction to Angular js 2.0
Introduction to Angular js 2.0Nagaraju Sangam The document discusses various aspects of Angular, particularly the challenges and limitations in AngularJS transitioning to Angular 2.0, including dependency injection, routing, change detection, and the use of ES6 with transpilers like TypeScript. It highlights enhancements in component-level change detection and the use of decorators for directives and services in Angular 2.0, while also referencing resources for further learning.
General Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScriptSpike Brehm The document discusses isomorphic JavaScript, which allows JavaScript code to run on both the client and server. It provides examples using libraries like Underscore.js and Handlebars.js isomorphically. Frameworks like Meteor, Mojito, and Rendr are introduced that support building isomorphic apps. The benefits are around performance, SEO, and code maintainability. The presentation concludes with a demo of building features into an sample isomorphic blog application.
android design pattern
android design patternLucas Xu The document discusses various design patterns commonly used in Android development such as MVC, MVVM, Observer, Adapter, Façade, Bridge, Factory, Template, Composition, and Decorator. It provides examples of how each pattern is implemented in Android by referencing classes, interfaces, and code snippets. Key Android classes and frameworks like View, Activity, AsyncTask, Media Framework, and I/O streams are used to demonstrate applying the design patterns.
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?MarkupBox The document compares AngularJS, ReactJS, and Node.js for web development, outlining their strengths. AngularJS is praised for its flexibility, easy testing, and user interface, while ReactJS is noted for its components, SEO effectiveness, and efficiency due to its virtual DOM. Node.js is recognized for data streaming, npm for package management, and its ability to serve as a server-side proxy, making it suitable for building fast and scalable applications.
How to Implement Basic Angular Routing and Nested Routing With Params in Angu...
How to Implement Basic Angular Routing and Nested Routing With Params in Angu...Katy Slemon The document provides a step-by-step guide on implementing basic and nested routing with parameters in Angular v11, including setting up a new Angular project and configuring routing components. It covers commands for creating components, setting up routes, and the use of ActivatedRoute for dynamic parameters. Additionally, the document offers a GitHub repository for users to clone and practice the demonstrated features.
How to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScriptKaty Slemon The document provides a comprehensive tutorial on building a Todo application using Vue 3 and TypeScript, focusing on the installation of Vue.js and a step-by-step guide to creating the app structure. It covers various aspects such as project setup, routing, state management with Vuex, and detailed code snippets for components and models. The tutorial emphasizes the benefits of using TypeScript for type safety and app quality, encouraging developers to leverage Vue 3's capabilities with TypeScript.
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppKaty Slemon The document outlines best practices for optimizing Angular applications, focusing on techniques such as using trackby with ngFor, separating logic from components, and implementing lazy loading to enhance performance. It emphasizes the importance of proper coding standards, variable type declarations, and central state management for better maintainability and readability. The guide serves as a resource for developers looking to improve their Angular code quality and application efficiency.
Tutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSPhilipp Burgmer This document provides an overview of developing mobile applications using AngularJS and Cordova. It discusses the setup, architecture, and tools needed including Node.js, Cordova, Ionic and AngularJS. It also covers creating a basic app, the project structure, available APIs, performance optimization techniques, and using hooks and build systems like FABS.
Angular from Scratch
Angular from ScratchChristian Lilley The document is a presentation by Christian Lilley on AngularJS, covering its architecture and features such as data-binding, routing, and services. It emphasizes Angular's modularity, dependency injection, and the role of controllers and directives in application structure. The presentation includes several demos and calls for audience interaction, providing resources for further exploration.
Testdrive AngularJS with Spring 4
Testdrive AngularJS with Spring 4Oliver Wahlen The document discusses the integration of AngularJS with Spring 4 for software development, mentioning motivations for using AngularJS, challenges with Java EE and JavaScript projects, and introducing Spring Boot. It outlines the software architecture, client and server tooling, and provides a detailed code example demonstrating the use of AngularJS and Spring components in building a single-page application. Additionally, it covers topics such as deployment, testing, and specific configurations for Spring data and security within the application framework.
Angular 2 overview
Angular 2 overviewJesse Warden Angular 2 is a new version of AngularJS that is currently in alpha. It embraces modern web standards like Shadow DOM and Web Workers. Angular 2 components replace directives and use classes instead of controllers. Templates are now called views. Two-way binding and ng-repeat are changed. The API is still changing but you can try it now on angular.io.
Angular Dependency Injection
Angular Dependency InjectionNir Kaufman The document explores dependency injection in Angular, detailing various injector types such as Node Injector and Module Injector, and the hierarchy control within components. It emphasizes the use of providers, including @Injectable and @NgModule, explaining configurations like providedIn. Additionally, it highlights the importance of using Injection Tokens for abstract types in the code implementation.
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsSpike Brehm This document discusses isomorphic JavaScript, which allows JavaScript code to run on both the client and server sides. It explains that isomorphic JavaScript is environment-agnostic and does not depend on browser- or server-specific properties. Popular libraries like Handlebars, Backbone, and React can be used isomorphically. Building isomorphic apps improves performance, enables search engine crawling of single-page apps, reduces code duplication, and increases flexibility. The document outlines how tools like Browserify and build systems like Grunt can be used to bundle code for both environments.
Angular Seminar-js
Angular Seminar-jsMindfire Solutions This document outlines key features of AngularJS, including its two-way data binding, dependency injection, directives, and services, presented by Padmalochan from Mindfire Solutions. It emphasizes the framework's capabilities for building single-page applications (SPAs) with improved performance and a rich user experience. Additionally, it covers architectural considerations, data binding mechanics, and provides links to further resources and a case study in sports statistics.
Up & running with ECMAScript6
Up & running with ECMAScript6Nir Kaufman The document provides a guide on setting up an ES6 environment, covering editor configuration, compiler selection, and module system integration. It discusses popular tools like Babel and Webpack for code compilation and module bundling, along with steps for migrating existing JavaScript code to ES6 syntax. Additionally, it emphasizes the benefits of each tool and offers guidance for incorporating ES6 features progressively.
Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bankDavid Amend This document summarizes a presentation about DAB Bank's experience switching to Angular.js for web development. It discusses how Angular.js helped solve problems with AJAX, customization, and legacy code. It provides an overview of how DAB Bank used Angular.js to build a personal finance manager application. Additional slides cover topics like SEO, security, Angular 2.0, TypeScript, and modern tech stacks.
In Memory Data Grids, Demystified!
In Memory Data Grids, Demystified! Uri Cohen This document provides an overview of in-memory data grids (IMDGs), including their history, how they work, and use cases. IMDGs evolved from local caches to distributed caches to provide a partitioned, highly available system of record with querying and transaction capabilities. They use consistent hashing to distribute data across nodes and provide availability through techniques like single master replication or quorum-based consensus. IMDGs are well-suited for fast, transactional access and real-time stream processing due to memory's speed advantage over disk. The document discusses data models, placement, consistency models, and other challenges IMDGs address.
More Related Content
What's hot (20)
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and moreAri Lerner The document discusses AngularJS, highlighting its features as a powerful front-end framework supported by Google, focusing on best practices for development and maintainability. It emphasizes the importance of modularizing code, using tools like Browserify and Gulp, and implementing testing strategies to ensure code quality. The author, Ari Lerner, also shares resources for further learning and engagement within the Angular community.
Zukunftssichere Anwendungen mit AngularJS 1.x entwickeln (GDG DevFest Karlsru...
Zukunftssichere Anwendungen mit AngularJS 1.x entwickeln (GDG DevFest Karlsru...Christian Janz The document discusses the development of future-proof applications using AngularJS 1.x, emphasizing its continued relevance during the transition to Angular 2. It outlines key improvements in Angular 2, such as a new template syntax, improved dependency injection, and a component-based architecture while noting that Angular 1.x remains viable for production applications. Migration strategies and refactoring patterns from AngularJS to Angular 2 are also presented, highlighting how features from Angular 2 can be integrated into existing AngularJS applications.
Angular based enterprise level frontend architecture
Angular based enterprise level frontend architectureHimanshu Tamrakar This document discusses different frontend architectures for Angular applications:
1. Using npm packages to create and distribute libraries that can be installed and used by other applications.
2. Implementing a mono repo architecture where related projects share a single code repository and node_modules folder.
3. Developing applications using a micro frontend architecture where features are developed as separate modules that can be independently deployed.
The document compares the advantages and disadvantages of each approach and provides examples of how to implement them using Angular CLI or Nx.
Angular Lazy Loading and Resolve (Route Resolver)
Angular Lazy Loading and Resolve (Route Resolver)Squash Apps Pvt Ltd Lazy loading allows modules to be loaded on demand instead of all at once on initial load to improve performance. It is implemented using loadChildren and routing modules. PreloadingStrategy can be used to preload routes. Resolve allows fetching data before navigating to a route by implementing the Resolve interface and adding it to routes. This improves the user experience by having data ready when the component loads.
Angular js
Angular jsKnoldus Inc. AngularJS is an open-source JavaScript framework developed by Google for building single-page applications, enhancing browser-based applications with MVC architecture. Key features include two-way data binding, deep linking, and a rich set of directives, which make it easier to create dynamic user interfaces. The document outlines how to set up an AngularJS application, use its core capabilities, and manage dependencies and project structure with tools like Yeoman, Grunt, and Bower.
Introduction to Angular js 2.0
Introduction to Angular js 2.0Nagaraju Sangam The document discusses various aspects of Angular, particularly the challenges and limitations in AngularJS transitioning to Angular 2.0, including dependency injection, routing, change detection, and the use of ES6 with transpilers like TypeScript. It highlights enhancements in component-level change detection and the use of decorators for directives and services in Angular 2.0, while also referencing resources for further learning.
General Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScriptSpike Brehm The document discusses isomorphic JavaScript, which allows JavaScript code to run on both the client and server. It provides examples using libraries like Underscore.js and Handlebars.js isomorphically. Frameworks like Meteor, Mojito, and Rendr are introduced that support building isomorphic apps. The benefits are around performance, SEO, and code maintainability. The presentation concludes with a demo of building features into an sample isomorphic blog application.
android design pattern
android design patternLucas Xu The document discusses various design patterns commonly used in Android development such as MVC, MVVM, Observer, Adapter, Façade, Bridge, Factory, Template, Composition, and Decorator. It provides examples of how each pattern is implemented in Android by referencing classes, interfaces, and code snippets. Key Android classes and frameworks like View, Activity, AsyncTask, Media Framework, and I/O streams are used to demonstrate applying the design patterns.
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?MarkupBox The document compares AngularJS, ReactJS, and Node.js for web development, outlining their strengths. AngularJS is praised for its flexibility, easy testing, and user interface, while ReactJS is noted for its components, SEO effectiveness, and efficiency due to its virtual DOM. Node.js is recognized for data streaming, npm for package management, and its ability to serve as a server-side proxy, making it suitable for building fast and scalable applications.
How to Implement Basic Angular Routing and Nested Routing With Params in Angu...
How to Implement Basic Angular Routing and Nested Routing With Params in Angu...Katy Slemon The document provides a step-by-step guide on implementing basic and nested routing with parameters in Angular v11, including setting up a new Angular project and configuring routing components. It covers commands for creating components, setting up routes, and the use of ActivatedRoute for dynamic parameters. Additionally, the document offers a GitHub repository for users to clone and practice the demonstrated features.
How to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScriptKaty Slemon The document provides a comprehensive tutorial on building a Todo application using Vue 3 and TypeScript, focusing on the installation of Vue.js and a step-by-step guide to creating the app structure. It covers various aspects such as project setup, routing, state management with Vuex, and detailed code snippets for components and models. The tutorial emphasizes the benefits of using TypeScript for type safety and app quality, encouraging developers to leverage Vue 3's capabilities with TypeScript.
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppKaty Slemon The document outlines best practices for optimizing Angular applications, focusing on techniques such as using trackby with ngFor, separating logic from components, and implementing lazy loading to enhance performance. It emphasizes the importance of proper coding standards, variable type declarations, and central state management for better maintainability and readability. The guide serves as a resource for developers looking to improve their Angular code quality and application efficiency.
Tutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSPhilipp Burgmer This document provides an overview of developing mobile applications using AngularJS and Cordova. It discusses the setup, architecture, and tools needed including Node.js, Cordova, Ionic and AngularJS. It also covers creating a basic app, the project structure, available APIs, performance optimization techniques, and using hooks and build systems like FABS.
Angular from Scratch
Angular from ScratchChristian Lilley The document is a presentation by Christian Lilley on AngularJS, covering its architecture and features such as data-binding, routing, and services. It emphasizes Angular's modularity, dependency injection, and the role of controllers and directives in application structure. The presentation includes several demos and calls for audience interaction, providing resources for further exploration.
Testdrive AngularJS with Spring 4
Testdrive AngularJS with Spring 4Oliver Wahlen The document discusses the integration of AngularJS with Spring 4 for software development, mentioning motivations for using AngularJS, challenges with Java EE and JavaScript projects, and introducing Spring Boot. It outlines the software architecture, client and server tooling, and provides a detailed code example demonstrating the use of AngularJS and Spring components in building a single-page application. Additionally, it covers topics such as deployment, testing, and specific configurations for Spring data and security within the application framework.
Angular 2 overview
Angular 2 overviewJesse Warden Angular 2 is a new version of AngularJS that is currently in alpha. It embraces modern web standards like Shadow DOM and Web Workers. Angular 2 components replace directives and use classes instead of controllers. Templates are now called views. Two-way binding and ng-repeat are changed. The API is still changing but you can try it now on angular.io.
Angular Dependency Injection
Angular Dependency InjectionNir Kaufman The document explores dependency injection in Angular, detailing various injector types such as Node Injector and Module Injector, and the hierarchy control within components. It emphasizes the use of providers, including @Injectable and @NgModule, explaining configurations like providedIn. Additionally, it highlights the importance of using Injection Tokens for abstract types in the code implementation.
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsSpike Brehm This document discusses isomorphic JavaScript, which allows JavaScript code to run on both the client and server sides. It explains that isomorphic JavaScript is environment-agnostic and does not depend on browser- or server-specific properties. Popular libraries like Handlebars, Backbone, and React can be used isomorphically. Building isomorphic apps improves performance, enables search engine crawling of single-page apps, reduces code duplication, and increases flexibility. The document outlines how tools like Browserify and build systems like Grunt can be used to bundle code for both environments.
Angular Seminar-js
Angular Seminar-jsMindfire Solutions This document outlines key features of AngularJS, including its two-way data binding, dependency injection, directives, and services, presented by Padmalochan from Mindfire Solutions. It emphasizes the framework's capabilities for building single-page applications (SPAs) with improved performance and a rich user experience. Additionally, it covers architectural considerations, data binding mechanics, and provides links to further resources and a case study in sports statistics.
Up & running with ECMAScript6
Up & running with ECMAScript6Nir Kaufman The document provides a guide on setting up an ES6 environment, covering editor configuration, compiler selection, and module system integration. It discusses popular tools like Babel and Webpack for code compilation and module bundling, along with steps for migrating existing JavaScript code to ES6 syntax. Additionally, it emphasizes the benefits of each tool and offers guidance for incorporating ES6 features progressively.
Viewers also liked (18)
Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bankDavid Amend This document summarizes a presentation about DAB Bank's experience switching to Angular.js for web development. It discusses how Angular.js helped solve problems with AJAX, customization, and legacy code. It provides an overview of how DAB Bank used Angular.js to build a personal finance manager application. Additional slides cover topics like SEO, security, Angular 2.0, TypeScript, and modern tech stacks.
In Memory Data Grids, Demystified!
In Memory Data Grids, Demystified! Uri Cohen This document provides an overview of in-memory data grids (IMDGs), including their history, how they work, and use cases. IMDGs evolved from local caches to distributed caches to provide a partitioned, highly available system of record with querying and transaction capabilities. They use consistent hashing to distribute data across nodes and provide availability through techniques like single master replication or quorum-based consensus. IMDGs are well-suited for fast, transactional access and real-time stream processing due to memory's speed advantage over disk. The document discusses data models, placement, consistency models, and other challenges IMDGs address.
Advanced AngularJS Tips and Tricks
Advanced AngularJS Tips and TricksJeremy Likness The document presents advanced Angular tips and tricks by Jeremy Likness, addressing key areas such as integration, best practices, debugging, and performance optimization based on extensive experience in enterprise AngularJS projects. It emphasizes the importance of structured code, early testing, and effective communication through services, while also providing practical advice on integrating third-party components and enhancing application performance. Resources for further learning are also included, such as courses and a GitHub repository for examples.
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationDavid Amend This document provides an overview of Grunt.js, a build tool designed to automate repetitive tasks in web development, improving software quality and delivery time through continuous integration practices. It details Grunt's capabilities, including tasks like file concatenation, linting, minification, and unit testing, alongside its integration with Yeoman for enhanced development workflows. Additionally, the document addresses the evolving skills required for front-end development and the tools that can unify development processes.
Data Grids vs Databases
Data Grids vs DatabasesGalder Zamarreño This document summarizes a presentation about data grids versus databases. It discusses how data grids provide extremely fast in-memory access to distributed data and can be used for caching to improve database performance. While data grids offer benefits like scalability, their use requires a different programming model than databases. They may replace databases for some use cases like analytics but databases will remain important for their maturity and existing implementations. Data grids are best viewed as complementing rather than replacing databases.
Javascript & Angular .js for the enterprise, lessons learned, typescript scal...
Javascript & Angular .js for the enterprise, lessons learned, typescript scal...David Amend javascript angular.js angular using typescript scalable code enterprise quality directives services demo project lessons learned advanced manageable code
Reasons to migrate to modern web development with JavaScript
Reasons to migrate to modern web development with JavaScriptDavid Amend The document discusses the transition from traditional server-side Java frameworks to modern JavaScript web development, emphasizing the importance of leveraging innovative web technologies for efficiency and user experience. It highlights challenges associated with server-side frameworks and advocates for a shift toward a modular, client-driven architecture that prioritizes frontend development. The document also outlines practical steps for organizations to adopt these modern technologies, including hiring skilled web developers and simplifying UI choices.
Hortonworks.Cluster Config Guide
Hortonworks.Cluster Config GuideDouglas Bernardini This document provides guidance on sizing and configuring Apache Hadoop clusters. It recommends separating master nodes, which run processes like the NameNode and JobTracker, from slave nodes, which run DataNodes, TaskTrackers and RegionServers. For medium to large clusters it suggests 4 master nodes and the remaining nodes as slaves. The document outlines factors to consider for optimizing performance and cost like selecting balanced CPU, memory and disk configurations and using a "shared nothing" architecture with 1GbE or 10GbE networking. Redundancy is more important for master than slave nodes.
Gwt widget frameworks_presentation
Gwt widget frameworks_presentationDavid Amend This document provides an overview and comparison of different GWT frameworks, including plain GWT, SmartGWT, Ext-GWT/GXT, and Vaadin. It discusses the features and limitations of each framework, including architecture, components, licensing, and support. The presentation compares the frameworks on factors like learning curve, performance, customization capabilities, and integration with other technologies and aims to help attendees decide which framework may be best for their needs and projects.
Geecon 2014 - Five Ways to Not Suck at Being a Java Freelancer
Geecon 2014 - Five Ways to Not Suck at Being a Java FreelancerRoberto Cortez The document outlines five key strategies for succeeding as a Java freelancer, emphasizing the importance of experience, reputation building, and financial management. It advises freelancers to diversify their skills and be proactive in marketing themselves. Additionally, it highlights the necessity of managing client relationships and maintaining a balance in workload.
Data Grids and Data Caching
Data Grids and Data CachingGalder Zamarreño Galder Zamarreño from Red Hat presented on Infinispan, an open source in-memory data grid platform. Infinispan can be used as a local cache, clustered cache, or as a data grid. As a data grid, it provides a highly available, distributed, and elastic data store. Infinispan also enables users to build their own data-as-a-service solutions in private clouds by virtualizing data and making it accessible in an elastic and scalable manner. Major companies use Infinispan both as a cache (e.g. for Hibernate) and as a data grid for applications requiring real-time access to distributed data.
Maven - Taming the Beast
Maven - Taming the BeastRoberto Cortez Roberto Cortez's presentation on Maven addresses its challenges such as slowness, complexity, and common pitfalls faced by developers. Highlighting its history and purpose of standardizing project management, he emphasizes the importance of understanding dependencies and build processes. The session also offers practical tips for improving build speed and resolving common issues encountered when using Maven.
Migration tales from java ee 5 to 7
Migration tales from java ee 5 to 7Roberto Cortez The presentation by Roberto Cortez discusses the migration from Java EE 5 to 7, highlighting major technological developments and challenges faced during the process. It emphasizes that migration is not straightforward and requires careful planning and discipline, particularly in dealing with legacy code and dependencies. The speaker shares insights about the Segurnet platform and the various strategies adopted to ensure a successful transition while mitigating risks associated with outdated technologies.
KYSUC - Keep Your Schema Under Control
KYSUC - Keep Your Schema Under ControlCoimbra JUG The document presents a comprehensive approach to database schema management, focusing on maintaining updated ER models, version-controlled scripts, and efficient deployment strategies. It emphasizes the importance of documentation and continuous integration within database management processes, using tools like Jenkins and Flyway for deployment. Best practices are outlined throughout the presentation for successful database development and maintenance.
Stateless authentication with OAuth 2 and JWT - JavaZone 2015
Stateless authentication with OAuth 2 and JWT - JavaZone 2015Alvaro Sanchez-Mariscal The document discusses stateless authentication using OAuth 2.0 and JSON Web Tokens (JWT). It begins with an introduction to OAuth 2.0, including its roles, common grant types like authorization code and implicit grants. It then discusses how JWT can be used to achieve statelessness by encoding claims in the token that are signed and can be verified without storing state on the authorization server. The document provides examples of what a JWT looks like and considerations for using JWT in applications.
Just enough app server
Just enough app serverAntonio Goncalves Antonio Goncalves discusses the need for streamlined Java EE application servers that avoid the pitfalls of traditional monolithic architectures. He emphasizes the advantages of customizing app server packaging to fit different application requirements, highlighting solutions like WildFly Swarm and microservices approaches. The presentation also touches on Docker usage and the evolution of Java EE to meet modern development needs.
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheLeslie Samuel To become a thought leader in your niche, first choose a specific niche where you can provide value. Strive to excel by continually learning, networking, and demonstrating your expertise through consistent content creation. For resources and guidance, visit www.becomeablogger.com.
Ad
Similar to Multi modularized project setup with gulp, typescript and angular.js (20)
Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)
Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)Chris O'Brien The document discusses various pitfalls when developing with the SharePoint Framework (SPFx), highlighting issues related to dependencies, code reuse, async programming, and deployment challenges. Key recommendations include using npm for dependency management, creating modules for code reuse, understanding Office UI Fabric components, and avoiding accidental bundling of libraries. The presentation emphasizes the importance of adopting best practices to ensure effective and manageable SPFx development.
Building JavaScript
Building JavaScriptBrady Clifford The document outlines the development process of web applications using task runners like Gulp to optimize code compilation and improve performance. Key objectives include creating an environment that mimics production, automating builds, and efficiently managing dependencies, particularly for AngularJS applications. It discusses strategies for reducing initial loading times, handling shared libraries, and architecting applications to be server agnostic, ultimately enabling better developer workflows and application performance.
Code driven development in drupal
Code driven development in drupalAndriy Yun This document discusses code driven development in Drupal. It recommends moving common site settings like entities, panels, roles and permissions, variables, and initial content to code using modules like Features. It outlines a workflow that uses local development environments, a Git repository, an integration environment, and build scripts. This allows deploying updates to production with one click by pulling code changes and running database updates. Benefits include fixing errors earlier, reduced bugfix time, simplified deployment, and minimizing human errors. Typical issues addressed are using consistent environments, code reviews, and managing the database across environments.
Configuration Management and Transforming Legacy Applications in the Enterpri...
Configuration Management and Transforming Legacy Applications in the Enterpri...Docker, Inc. Société Générale's transformation strategy aimed to migrate 80% of its applications to a cloud PaaS by 2020, allowing developers to independently manage their applications through a centralized cloud platform. The document outlines key practices in configuration management, deploying applications via Docker, and managing different environments and configurations effectively. It emphasizes the importance of separating configuration from application code and implementing a robust continuous delivery pipeline.
Webpack: from 0 to 2
Webpack: from 0 to 2Alessandro Bellini - Webpack is a module bundler that builds dependencies between modules and manages assets like JavaScript files, CSS files, and images.
- It uses loaders to transform different types of modules and plugins to extend its functionality. Loaders handle file transformations while plugins can access and modify the build process.
- Code splitting allows splitting code into separate bundles to optimize load performance by prioritizing loading and allowing on-demand loading of code. Techniques like extracting vendor code and using import statements help enable code splitting in Webpack.
DevHub 3 - Composer plus Magento
DevHub 3 - Composer plus MagentoMagento Dev The document discusses using Composer and modules to better organize Magento projects. It recommends:
- Using Composer to install Magento core and modules separately from the project codebase.
- Treating modules as independent, reusable components with their own versioning and maintenance.
- Allowing multiple teams to collaborate on developing the same module for different projects.
- Managing module versions and dependencies flexibly between projects through Composer.
Serverless Container with Source2Image
Serverless Container with Source2ImageQAware GmbH The document discusses the evolution of software delivery, focusing on the transition from traditional deployment methods to serverless and containerization approaches. It highlights various tools and workflows for building and deploying applications, including source-to-image methodologies and comparisons of different builder tools like Skaffold, Tilt, and Garden. Additionally, it emphasizes the importance of optimizing change lead times and using well-architected images and pipeline orchestrators for efficient serverless development.
Serverless containers … with source-to-image
Serverless containers … with source-to-imageJosef Adersberger The document discusses the evolution of software delivery, focusing on the transition from traditional methods to modern serverless architectures and tools. It highlights key processes such as source-to-image workflows, automation tools like Skaffold and Tilt, and the benefits of adopting serverless solutions for improved efficiency and scalability. The author emphasizes the importance of optimizing change lead times and integrating robust CI/CD practices to enhance software development and deployment.
Continuous integration / continuous delivery
Continuous integration / continuous deliveryEatDog The document discusses continuous integration and continuous delivery (CI/CD) practices for web applications, focusing on improving development speed, product quality, and risk management. It highlights a range of tools and techniques, including Docker, Jenkins, PHPUnit, and automated testing strategies, aimed at ensuring quality through integrated development and testing. The author emphasizes the importance of developer responsibility for code quality, collaboration in testing, and efficient feedback cycles to optimize CI/CD processes.
Implementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyMarcos Labad The document discusses the implementation of a Symfony-based CMS system, highlighting the importance of project planning, choosing the right technologies like Symfony and Doctrine, and ensuring effective communication among stakeholders. It emphasizes usability and design considerations, the complexity of CMS features, and best practices for maintenance and delivery. The presentation shares valuable insights from real experiences in the internet industry, underscoring the balance between technical capabilities and user needs.
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...Evgeniy Kuzmin The document details a comprehensive strategy for implementing continuous integration and continuous delivery (CI/CD) for web applications, particularly using the Laravel framework and AWS. It emphasizes the importance of integrating testing and development processes, ensuring quality through responsibility shared among developers, and optimizing feedback and deployment times. The guide also covers practical tools and approaches, including Docker, Jenkins, and phing, for effective CI/CD execution and monitoring in development environments.
[Patel] SPFx: An ISV Insight into latest Microsoft's customization model
[Patel] SPFx: An ISV Insight into latest Microsoft's customization modelEuropean Collaboration Summit The document provides an overview of the SharePoint Framework (SPFx) from the perspective of an ISV. It begins by focusing on key aspects of SPFx like publishing versions, pushing updates through a CDN, using shared code and external libraries, and using custom PropertyPane properties. It then provides a history of SharePoint development models and extensibility opportunities. The document explains what SPFx is, its advantages and disadvantages, and choices for the UI framework. It discusses building a solution, publishing, dependencies, consuming data, the advanced PropertyPane, updating SPFx, and provides some helpful tips.
Continuous Integration/ Continuous Delivery of web applications
Continuous Integration/ Continuous Delivery of web applicationsEvgeniy Kuzmin The document outlines the implementation of continuous integration and continuous delivery (CI/CD) for web applications using Agile methodologies, focusing on improving development speed, quality, and feedback. It details the use of various tools and practices such as Docker for local development, automated testing strategies, and integration with services like Jenkins and AWS. Key aspects include the roles of developers in testing, test optimizations, and deployment procedures, emphasizing the importance of quality responsibility on developers.
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Mack Hardy The document outlines strategies and tips for building enterprise Drupal applications, emphasizing the importance of treating the application like a product with fixed functionality and thorough release management. It discusses the deployment process, automated testing, and various Drupal modules that can enhance application performance and customization. Additionally, it covers caching and performance optimization techniques using technologies like FastCGI, APC, memcached, and Varnish to ensure scalability and speed.
Creating Developer-Friendly Docker Containers with Chaperone
Creating Developer-Friendly Docker Containers with ChaperoneGary Wisniewski The document discusses creating developer-friendly containers using Chaperone and the chaperone-baseimage family. Chaperone is a process manager that provides services like logging, cron jobs, and orderly shutdown within containers. The chaperone-baseimage images use Chaperone to provide three personalities for containers: closed, attached-data, and development. This allows developers to have a consistent environment to develop applications without understanding container internals. The development model mounts the container's infrastructure to the developer's local directory for easy editing of code and data outside the container.
Social Connections VI — IBM Connections Extensions and Themes Demystified
Social Connections VI — IBM Connections Extensions and Themes DemystifiedClaudio Procida IBM Connections uses JavaScript extensively to build its applications and UI components. JavaScript resources are centrally served by the Common application and dynamically generated into layers based on dependencies. Modules can be written using the AMD or legacy Dojo format and aggregated. Extensions are supported through extension points like web bundles, themes, and module bindings. Developers can customize or extend Connections using these extension mechanisms.
Droidcon Paris 2015
Droidcon Paris 2015Renaud Boulard The document summarizes key points from a conference on November 9-10, 2015 about Gradle builds, Android performance, healthy code bases, and trending Android topics. It discusses optimizing Gradle builds for speed, including configuration on demand, the Gradle daemon, and avoiding expensive operations. It also covers measuring build times for different project sizes and configurations. Additional sections provide information on creating custom Gradle plugins, using data binding in Android, and new tools like Jack, Kotlin, and Eddystone beacons.
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...Fwdays The document discusses the architectural approach of microfrontends, highlighting their benefits such as independent deployments, component-oriented testing, and encapsulation. It emphasizes the need for teams to adapt to a scalable structure that aligns with their communication model while maintaining autonomy in development. Additionally, it outlines technical integration strategies, including module federation and the utilization of web components, to ensure flexibility and performance in a chaotic multi-framework environment.
Meet Magento Spain 2019 - Our Experience with Magento Cloud
Meet Magento Spain 2019 - Our Experience with Magento CloudLyzun Oleksandr This document provides information about developing and deploying Magento applications on Magento Cloud. It describes the development workflow including working in local, integration, and branch environments. It also outlines the build, deploy, and post-deploy phases of the deployment process. Additionally, it covers static content deployment, configuration files, patches and hotfixes, Fastly configuration, and potential improvements to Magento Cloud.
Custom Tile Generation in PCF
Custom Tile Generation in PCFVMware Tanzu The document outlines the process of custom tile generation in Pivotal Cloud Foundry, focusing on the memory-based autoscaler application. Key steps include creating a service broker, implementing endpoints, and managing dependencies such as databases and buildpacks. The document also provides links to relevant tools and resources for further information.
[Patel] SPFx: An ISV Insight into latest Microsoft's customization model
[Patel] SPFx: An ISV Insight into latest Microsoft's customization modelEuropean Collaboration Summit
Ad
More from David Amend (6)
Componentization css angular
Componentization css angularDavid Amend The document discusses CSS componentization strategies in Angular applications. It covers:
- Angular's emulated view encapsulation and how it adds prefixes like _nghost and _ngcontent to isolate CSS
- Using :host, :host-context and ::ng-deep to style components and apply themes
- Different CSS architectures like OOCSS, BEM and SMACSS that can be used to structure CSS components
- The benefits of separating CSS into standalone, reusable style components vs embedding styles directly in components
- Best practices like defining styles using standalone CSS files and applying view encapsulation: None for performance
Thin Server Architecture SPA, 5 years old presentation
Thin Server Architecture SPA, 5 years old presentationDavid Amend The document discusses the future of web technologies with thin-server architectures. It outlines the history of web development from early desktop applications to modern rich internet applications. The thin-server architecture moves more functionality to the client side, making applications more scalable, cacheable, and stateless. Major companies are investing in client-side technologies like Google Web Toolkit, and emerging standards like HTML5 support more intelligent clients.
Grunt Advanced Vol 2, Plugins Text I/O with fun
Grunt Advanced Vol 2, Plugins Text I/O with funDavid Amend Grunt.js is a build tool like Rake, Ant, Maven, and Groovy that uses npm and JSON syntax. It is easy to extend and supports various environments. The document discusses several Grunt plugins for text input/output including grunt-figlet, grunt-cat, grunt-attention, grunt-prompt, and grunt-notify. It also briefly describes the Grunt API and configuration utilities.
Client Vs. Server Rendering
Client Vs. Server RenderingDavid Amend The document discusses the architectural decision between client-side and server-side rendering, noting the advantages and disadvantages of each approach. It covers factors such as performance, user experience, and development flexibility, while emphasizing the importance of understanding the project type when choosing a rendering strategy. Hybrid-rendering solutions are highlighted as a way to balance benefits from both methods, while also considering future trends in technology.
Client vs Server Templating: Speed up initial load for SPA with Angular as an...
Client vs Server Templating: Speed up initial load for SPA with Angular as an...David Amend The document discusses various web-rendering techniques and architectures, comparing client-side and server-side rendering approaches, emphasizing current trends and future technologies. It covers performance optimization strategies, such as lazy loading, asynchronous content loading, and template rendering, while also exploring tools like Angular.js and various JS frameworks. The aim is to enhance user experience while managing complexity in web application development.
Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Grunt js for the Enterprise Vol.1: Frontend Performance with PhantomasDavid Amend The document discusses the use of grunt.js and Phantomas for performance monitoring in enterprise environments. It details the tool's capabilities, including metrics for analyzing frontend performance, custom assertions, and integration with continuous integration systems. Additionally, it notes the tool's strengths, limitations, and setup simplicity.
Multi modularized project setup with gulp, typescript and angular.js
- 1. Practical Multi-Module Gulp-Setup with Angular.JS & TypeScript at DAB Bank
- 2. 1. Build Setup 2. Dependency Management To Be Solved ...
- 3. Pursuit of stable quality & efficience - 3 teams - 25 developers - single portal project
- 4. Node.js NPM: Build tools for the web - Efficient development - Minification - Optimization - Modularization - Analysis
- 5. First Build Setup Approach - grunt.js - organized by feature - functionality by file - missing cross project/ module management
- 7. First approach: Build Setup Copy-Paste @Dev: long manual list @Prod: Differs from @Dev
- 8. Scaffolding / Templating Problems with existing template projects - opinionated → create your own - copy&paste template → breaks on updates → require merging - missing cross module
- 9. DAB Enterprise Build Setup customization by composition - predefine - override - extend - integrate
- 10. npm: common-setup-module gulpfile.js + BuildConfig.js + tslint.json, tsd.rc, protractor.conf.js, karma.conf.js
- 11. common-setup-module gulpfile module.exports = function ( gulp, CONFIG) { gulp.task("default", ["dev"]); gulp.task("prod:once", ["prod"]); gulp.task("prod", ["prod:tscompile", "templates"]); gulp.task("dev", ["dev:once", "webserver", "watch"]); … gulp.task("js-app", function () { gulp.src(CONFIG.SRC.TS.FILES()) .pipe(partials.errorPipe()) .pipe(plugins.concat( CONFIG.DIST.JS.FILES.APP())) .pipe(gulp.dest( CONFIG.DIST.JS.FOLDER())); });
- 12. Appplication module myappfolder node_modules - package.json - gulpfile.js - bower.json
- 13. Composition: Gulpfile.json var gulp = require("gulp"); var CONFIG= require('./node_modules/common-setup-module/BuildConfig'); var gulpInit = require("./node_modules/common-setup-module/gulpfile"); CONFIG.SRC.JS.FILES = “customSRC/**.js” ; var gulpInstanceToOverride = gulpInit(gulp, CONFIG); gulpInstanceToOverride.task("js-app", function(){ console.log("was overridden"); }); gulpInstanceToOverride.task(“someNewTask”, function(){ ...}
- 14. 1. Build Setup 2. Dependency Management To be Solved ...
- 15. JavaScript IDE Support JsHint Refactoring → by single file Autocompletion
- 16. Dependency Management ??? → cross file ??? → cross module1. 2.
- 17. Cross File Dependency Management - AMD - Common.Js - ES6 Harmony - angular.modules - Web Components - TypeScript - Bower - None ...
- 18. Angular.module Best Practices /app /applicationContext.js /modules /submodule /submodule-service.js /submodule-directive.js /submodule-controller.js Miško Hevery Inspired By 1. 2. Module Creation & Referencing Module Retrieval & Chargement
- 19. Single Point of Dependency Wiring /app applicationContext.js angular.module(‘de.dab.pfm.app’, [‘de.dab.pfm.dashboard’]); angular.module(‘de.dab.pfm.dashboard’, [‘de.dab.pfm.dashboard.header’]); angular.module(‘de.dab.pfm.dashboard.header’, [‘de.dab.pfm.dashboard. intro’,‘de.dab.shared.pieChart‘]); angular.module(‘de.dab.pfm.dashboard.intro’, [‘...’]); angular.module(‘de.dab.shared.pieChart’, [‘...’]); Registration
- 20. Usage of Module In File pieChart pie-chart-directive.js angular.module(‘de.dab.shared.pieChart’) .directive(‘de.dab.shared.pieChartService’, ...); pie-chart-service.js angular.module(‘de.dab.shared.pieChart’) .service(‘de.dab.shared.pieChartService’, ...) pie-chart-model.js pie-chart.tpl.html Getter
- 21. Why separate angular. module Registration & Usage ? Handling cross file dependencies over to angular → order does not matter
- 23. Lab: Results TypeScript: outer modules = Common.js/AMD import angular = require(“./thirdparty/angular.d.ts”);
- 24. Lab: TS: outer modules (Common.js/AMD) → no difference to angular.module → aync needed in AMD ? → define file dependencies: anyway app.min.js file deployed Evidence, same graph with: https: //github.com/auchenberg/dependo
- 25. Dependency Management ??? → cross file ??? → cross module1. 2.
- 26. Cross File Dependency Solution 1. Concat → cross file dependencies managed by angular.module 2. TypeScript innerModules module de.dab.myproject{ import MyType = de.dab.IMyType; } IMytype.d.ts declare module de.dab { interface IMyType { id: string; accounts : IAccount[]; }
- 27. Final Solution to Dependency Management 1. BuildConfig.js → store bower.json “dab-*”deps devDependencies/dependencies 2. gulpfile.js → use list of deps in tasks Bower ???
- 28. JavaScript Multi Projects bower.json deps: dab-subproject-component dab-common-widget-component dab-bootstrap-component current module gulpfile.js concat/TypeScript: common.js, app.js, templates.js, libs.js webserver: target/main.css bower dependency bower devDependency 1. Register local module bower link 2. Use on local machine bower link mymodule *.d.ts *.ts
- 30. Trash
- 31. Advanced TypeScript & Angular 1. Gulp Multi-Project Build-Setup 2. Code Conventions & Best Practices
- 32. Gulp Multi-Project Build-Setup 1. Why another bootstrap? 2. scaffolding vs. composition 3. multi-project development 4. TypeScript strategy a. tsd b. devDependency, dependency strategy i. no </// references ii. separate in .d.ts => performance c. Java → .d.ts generator d. TsLint
- 33. Why another bootstrap? 1. Fit to techstack 2. Large scale project 3. Multi-project strategy 4. Being up to date
- 34. Scaffolding vs Composition Problems with scaffolding (Yeoman) - copy+paste of templates - opinionated technologies - missing common glue - hard to find matching techstack - breaks on updates - merge operations → convention > customization
- 35. Composition / Inheritance - glue strategy for projects - technology agnostic - update project without merging - reuse != copy → customization is the default
- 36. By Example 1. leading gulpfile 2. customization: override, extend or integrate 3.
- 37. Complexity RequireJS - file dependencies - Issues with testing - 350 Requests are slow - at runtime & async - Angular.modules vs. modularization → will be one file at prod, anyway → which files to deliver in which package? → versioning
- 38. Simplicity 1. Modularize by module 2. Adapt complexity later: http://www.2ality.com/2014/09/es6- modules-final.html 3. Bower: not supporting multi versioning 4. be similar to production, only dev & prod mode angular overmind
- 39. Multi Project Development Problems: 1. Multi project strategy 2. 3. realtime sync
- 40. Multi Project Development 1. bower link 2. npm link 3. git versioning vs. searchable/-repository 4. devDependency, dependency strategy
- 41. Code Conventions & Best Practices 1. constant namespaces 2. direct export 3. controller a. mycontroller = this.scope; 4. directives a. lambda 5. services
- 43. Compiling & TypeScript Why TypeScript? - Compilation Imposed by Google - Sweet Home Java/.Net-Developer - Refactoring Made Easy - Models Management - Future-Proof Syntax, Angular 2.0, … - Choice of TypeScriptifying