Build Angular 2 Apps in Drupal 8 An Introduction to Angular 2 and integration with Drupal 8
Part A Why Angular?
Why JS Framework Devices Faster UX More capable browsers Faster Build Native Experience
Criteria Composable Architecture Performant Portable Smooth UX Rapid Building Maintainable
Composable Architecture Everything is a component. Component is composed of TS File - Business Logic HTML File - Templates CSS File - Styles Complex components created using composition. Data flows Down Events flow up.
Performance http://www.stefankrause.net
Portable Render module separated from core. Can be rendered to Web Workers Mobile Native UIs Desktop environment Test runners Rendering abstracted from application code.
Rapid Building Code Generation Angular CLI Reusable Components
Demo Demo of CLI for application structure and component generation.
Part B Integration with Angular
Strategies Headless Drupal Progressive DeCoupled Routing
Headless Drupal Drupal Data Store REST APIs Caching Auth Angular Routing SEO Caching
Progressive Decoupled Thin Angular Layer Widget based sites Angular Apps loaded as widgets Decoupled Blocks module Thick Angular Layer Includes Routing User Theme Layer to integrate Best of both worlds
Architecture Block Diagram Responsibilities
Page Architecture
Create, Manage Content Migration Caching Routing Hosting REST API Users / Auth SEO Data Layout Caching Template Routing Pagination CSS Lazy Load Services Component DRUPAL 8 ANGULAR 2
Data Flow
DEMO Angular Code Structure Integration with Theme
Introduction to Angular Essential Angular Components Services Templates Routing Shadow Dom
Component Everything is a component Key Parts of a Component Templates Styles Providers <todo - insert code snippets >
Services Horizontal Tier Services All Components <Insert Code Snippet>
Routing Routes Route Configurations Routing between Components Routing <Insert Code Snippet>
Performance Considerations 100 ms Speed Caching Lazy Loading
~100 ms Page Load Time
Speed 100ms - users perceive as instantaneous. 10x~20x reduction of speed required First Page might not improve without Angular Universal support.
Strategies Template Cache Cached Angular templates would increase rendering speed Lazy Loading Modules to be lazy loaded with Angular. Decreases size Initial page load slower.
Build Separation of Concerns Re-use Styling View Encapsulation Build Locally Code Generation
Separation of Concerns Views provide data. Angular Templates render. Advantages Views cloned - minimal change between sites. Templates - would closely match markup required for site. Easy to modify and reuse.
Re-use Design once, use anywhere. Photos Module Photo Landing Photo Category Home Photo Different data, but same layout. Plug different data from rest API.
Local Build Build in the dev machine Browser Sync Faster Build Time Linting / Testing Component based work division
Styling Shadow DOM CSS applied to only the block. Re-use components CSS. Ease of styling - overrides not required.
Code Generation Tools like Angular CLI to generate code. Leaner code. Easy to maintain. Pre Built Components
Issues Dynamic Component Loading Redundant Config Authenticated Pages
Redundant Config Need to configure at two places. Ex: - Routes, creation of a new page.
Dynamic Component Loading Drupal Content - Component Integration Dynamically rearrange components
Authenticated Pages Approach - to fall back on drupal for authenticated pages like login. Cons - Might have to theme it at two difference place. The CSS would be present in two different files.
Part C Advanced Angular
Progressive Web Apps Store application in browser Faster Response Times Load only what is required. Service Workers Offline Capabilities Angular CLI Auto generate manifest Support Safari not supported yet!
Angular Universal Server Rendered Pages Faster Initial Load Prebootjs Records state Playback of events