Build Angular 2 Apps in Drupal 8. An Introduction to Angular 2 and integration with Drupal 8

Transcription

1 Build Angular 2 Apps in Drupal 8 An Introduction to Angular 2 and integration with Drupal 8

2 Part A Why Angular?

3 Why JS Framework Devices Faster UX More capable browsers Faster Build Native Experience

4 Criteria Composable Architecture Performant Portable Smooth UX Rapid Building Maintainable

5 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.

6 Performance

7 Portable Render module separated from core. Can be rendered to Web Workers Mobile Native UIs Desktop environment Test runners Rendering abstracted from application code.

8 Rapid Building Code Generation Angular CLI Reusable Components

9 Demo Demo of CLI for application structure and component generation.

10 Part B Integration with Angular

11 Strategies Headless Drupal Progressive DeCoupled Routing

12 Headless Drupal Drupal Data Store REST APIs Caching Auth Angular Routing SEO Caching

13 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

14 Architecture Block Diagram Responsibilities

15 Page Architecture

16 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

17 Data Flow

18 DEMO Angular Code Structure Integration with Theme

19 Introduction to Angular Essential Angular Components Services Templates Routing Shadow Dom

20 Component Everything is a component Key Parts of a Component Templates Styles Providers <todo - insert code snippets >

21 Services Horizontal Tier Services All Components <Insert Code Snippet>

22 Routing Routes Route Configurations Routing between Components Routing <Insert Code Snippet>

23 Performance Considerations 100 ms Speed Caching Lazy Loading

24 ~100 ms Page Load Time

25 Speed 100ms - users perceive as instantaneous. 10x~20x reduction of speed required First Page might not improve without Angular Universal support.

26 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.

27 Build Separation of Concerns Re-use Styling View Encapsulation Build Locally Code Generation

28 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.

29 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.

30 Local Build Build in the dev machine Browser Sync Faster Build Time Linting / Testing Component based work division

31 Styling Shadow DOM CSS applied to only the block. Re-use components CSS. Ease of styling - overrides not required.

32 Code Generation Tools like Angular CLI to generate code. Leaner code. Easy to maintain. Pre Built Components

33 Issues Dynamic Component Loading Redundant Config Authenticated Pages

34 Redundant Config Need to configure at two places. Ex: - Routes, creation of a new page.

35 Dynamic Component Loading Drupal Content - Component Integration Dynamically rearrange components

36 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.

37 Part C Advanced Angular

38 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!

39 Angular Universal Server Rendered Pages Faster Initial Load Prebootjs Records state Playback of events