Skip to content

Commit fe89077

Browse files
tomastrajantomastrajan
committed
feat(demo): add quick nav to major pages, add microfrontends use case
1 parent 49e211f commit fe89077

File tree

10 files changed

+427
-52
lines changed

10 files changed

+427
-52
lines changed

‎projects/elements-demo/src/app/app-routing.module.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,10 @@ const routes: Routes = [
3535
imports: [
3636
RouterModule.forRoot(routes, {
3737
useHash: true,
38-
scrollPositionRestoration: 'enabled'
38+
scrollPositionRestoration: 'enabled',
39+
anchorScrolling: 'enabled',
40+
onSameUrlNavigation: 'reload',
41+
scrollOffset: [0, 100]
3942
})
4043
],
4144
exports: [RouterModule]

‎projects/elements-demo/src/app/features/docs/configuration/configuration.component.html

Lines changed: 4 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -73,32 +73,11 @@ <h2>Supported features</h2>
7373
✅ Global and granular configuration of <code>errorComponent</code> (and
7474
<code>errorTemplate</code>)
7575
</li>
76-
</ul>
77-
78-
<h2>Upcoming pre-configuration features</h2>
79-
80-
<p>
81-
Currently we're working to enable pre-configuration of various other options
82-
like:
83-
</p>
84-
85-
<ul>
86-
<li>Granular element pre-loading</li>
87-
<li class="done">
88-
Global and granular configuration of <code>loadingComponent</code> (and
89-
<code>loadingTemplate</code>)
90-
</li>
91-
<li class="done">
92-
Global and granular configuration of <code>errorComponent</code> (and
93-
<code>errorTemplate</code>)
94-
</li>
95-
<li class="done">
96-
Global and granular configuration of <code>isModule</code> flag (script
97-
type module for ECMAScript modules)
76+
<li>
77+
✅ Granular element pre-loading (config based)
9878
</li>
99-
<li class="done">
100-
Posibility to use loading and error components (not just
101-
<code>&#60;ng-template></code>
79+
<li>
80+
✅ Ability to pre-load elements based on custom conditions using a service
10281
</li>
10382
</ul>
10483
</div>

‎projects/elements-demo/src/app/features/docs/use-cases/use-cases.component.html

Lines changed: 189 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
<div class="quick-nav">
2+
<h3>Quick navigation</h3>
3+
<ul>
4+
<li><a routerLink="." fragment="sub-applications">Sub-applications</a></li>
5+
<li><a routerLink="." fragment="microfrontends">Microfrontends</a></li>
6+
<li><a routerLink="." fragment="heavy-components">Heavy components</a></li>
7+
</ul>
8+
</div>
9+
110
<div class="wrapper">
211
<h1>Use cases</h1>
312

@@ -6,7 +15,7 @@ <h1>Use cases</h1>
615
library...
716
</p>
817

9-
<h2>Microfrontends style "sub-applications"</h2>
18+
<h2 id="sub-applications">Microfrontends style "sub-applications"</h2>
1019

1120
<p>
1221
Imagine a large enterprise organization building many standalone frontend
@@ -390,12 +399,189 @@ <h2>Microfrontends style "sub-applications"</h2>
390399
<blockquote>
391400
We could still employ query params (or even file name versioning) in case we
392401
would like to have more granular control about which version of the element
393-
will be downloaded by the consumer appto facilitate stuff like A/B testing.
402+
will be downloaded by the consumer app to facilitate stuff like A/B testing.
394403
Please note that this has to be implemented with corresponding support on
395404
the server side.
396405
</blockquote>
397406

398-
<h2>On-demand loading of a heavy 3rd party component</h2>
407+
<h2 id="microfrontends">Full microfrontends solutions</h2>
408+
409+
<p>
410+
Let's say we want to build fully dynamic application. An application which
411+
will be built from the individual blocks <strong>at runtime</strong> based
412+
on some configuration. The configuration itself can be provided from the
413+
start but can also be retrieved later, for example asynchronously (and
414+
possibly multiple times) from a backend...
415+
</p>
416+
417+
<blockquote>
418+
The standard example of such an application is configurable dashboard where
419+
users can create fully custom layouts based on what kind of information they
420+
need using all the available widgets.
421+
</blockquote>
422+
423+
<svg viewBox="0 0 540 320" xmlns="http://www.w3.org/2000/svg">
424+
<g>
425+
<title>Layer 1</title>
426+
<rect
427+
fill="#cccccc"
428+
stroke-width="2"
429+
x="29.5"
430+
y="21.0375"
431+
width="483"
432+
height="276"
433+
id="svg_3"
434+
/>
435+
<rect
436+
fill="#ffffff"
437+
stroke="null"
438+
stroke-width="2"
439+
stroke-opacity="null"
440+
x="46.5"
441+
y="38.0375"
442+
width="449"
443+
height="60"
444+
id="svg_6"
445+
/>
446+
<rect
447+
fill="#ffffff"
448+
stroke-width="9"
449+
fill-opacity="null"
450+
x="409.500002"
451+
y="121.037495"
452+
width="80.999998"
453+
height="154.999995"
454+
id="svg_8"
455+
stroke="#ce2f2f"
456+
/>
457+
<text
458+
fill="#d32f2f"
459+
stroke="null"
460+
stroke-width="0"
461+
stroke-opacity="null"
462+
x="408"
463+
y="200"
464+
id="svg_9"
465+
font-size="15"
466+
font-family="'Courier New', Courier, monospace"
467+
text-anchor="start"
468+
xml:space="preserve"
469+
font-weight="bold"
470+
>
471+
element
472+
</text>
473+
<rect
474+
stroke="#ce2f2f"
475+
fill="#ffffff"
476+
stroke-width="9"
477+
fill-opacity="null"
478+
x="50.706488"
479+
y="42.690335"
480+
width="440.357612"
481+
height="50.73477"
482+
id="svg_11"
483+
/>
484+
<rect
485+
fill="#ffffff"
486+
stroke-width="9"
487+
fill-opacity="null"
488+
x="302.391181"
489+
y="120.563562"
490+
width="80.999998"
491+
height="154.999995"
492+
id="svg_12"
493+
stroke="#ce2f2f"
494+
/>
495+
<rect
496+
stroke="#ce2f2f"
497+
fill="#ffffff"
498+
stroke-width="9"
499+
fill-opacity="null"
500+
x="51.680711"
501+
y="120.089629"
502+
width="227.919177"
503+
height="154.999995"
504+
id="svg_13"
505+
/>
506+
<text
507+
fill="#d32f2f"
508+
stroke="null"
509+
stroke-width="0"
510+
stroke-opacity="null"
511+
x="302"
512+
y="200"
513+
id="svg_14"
514+
font-size="15"
515+
font-family="'Courier New', Courier, monospace"
516+
text-anchor="start"
517+
xml:space="preserve"
518+
font-weight="bold"
519+
>
520+
element
521+
</text>
522+
<text
523+
fill="#d32f2f"
524+
stroke="null"
525+
stroke-width="0"
526+
stroke-opacity="null"
527+
x="126"
528+
y="200"
529+
id="svg_15"
530+
font-size="15"
531+
font-family="'Courier New', Courier, monospace"
532+
text-anchor="start"
533+
xml:space="preserve"
534+
font-weight="bold"
535+
>
536+
element
537+
</text>
538+
<text
539+
fill="#d32f2f"
540+
stroke="null"
541+
stroke-width="0"
542+
stroke-opacity="null"
543+
x="235"
544+
y="73"
545+
id="svg_16"
546+
font-size="15"
547+
font-family="'Courier New', Courier, monospace"
548+
text-anchor="start"
549+
xml:space="preserve"
550+
font-weight="bold"
551+
>
552+
element
553+
</text>
554+
</g>
555+
</svg>
556+
557+
<p>
558+
While it is possible to implement this using
559+
<strong>standard Angular approach</strong>, the resulting solution will most
560+
likely be very complex and have <strong>severe limitations</strong> in terms
561+
of used technologies and whole release / deployment lifecycle management.
562+
</p>
563+
564+
<p>
565+
On the other hand, using <code>*axLazyElementDynamic</code> directive
566+
enables us to lazy load any web component to be used inside of out Angular
567+
application <strong>without hard-coding of its tag name</strong>
568+
inside of the consumer Angular component template.
569+
</p>
570+
571+
<blockquote class="large">
572+
Using <code>*axLazyElementDynamic</code> enables us to specify custom
573+
element tag dynamically during runtime while still leveraging standard
574+
Angular template property and event bindings!
575+
</blockquote>
576+
577+
<p>
578+
Check out the live demo of this approach in
579+
<a routerLink="../../../examples/dynamic">Dynamic examples page</a> !
580+
</p>
581+
582+
<h2 id="heavy-components">
583+
On-demand loading of a heavy 3rd party component
584+
</h2>
399585

400586
<p>
401587
Let's say we are building an Angular application and we are paying extra

‎projects/elements-demo/src/app/features/docs/use-cases/use-cases.component.scss

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,44 @@
1+
:host {
2+
position: relative;
3+
}
4+
5+
.quick-nav {
6+
display: none;
7+
position: fixed;
8+
top: 105px;
9+
left: 75%;
10+
right: 0;
11+
padding: 0 20px;
12+
13+
h3 {
14+
font-size: 16px;
15+
opacity: 0.5;
16+
}
17+
18+
ul {
19+
list-style-type: none;
20+
21+
a {
22+
color: #000;
23+
24+
&:hover,
25+
&:focus {
26+
color: #d32f2f;
27+
}
28+
}
29+
}
30+
}
31+
132
h2 {
233
margin: 40px 0 10px 0;
334
font-weight: bold;
435
}
536

637
:host-context(.responsive-large) {
38+
.quick-nav {
39+
display: block;
40+
}
41+
742
.wrapper {
843
width: 70%;
944
}

0 commit comments

Comments
 (0)