1
What could be the future of web
Module federation
and web components
2
Agenda
Web components
What it is?
Current status
Module federation
What it is?
When to use it
How to use it
Project update
3
Web components - what it is?
● Web Components is a suite of different technologies allowing you to create reusable custom
elements
○ Standardized way of sharing components
● Custom elements
○ JS API to define custom elements
● Shadow DOM
○ API to encapsulate your component so it doesn’t break other components
● HTML templates
○ Markup language, that is not displayed in the rendered page. Can be reused
Perfect guide with examples https://developer.mozilla.org/en-US/docs/Web/Web_Components
4
Custom elements
● You can define custom element by calling CustomElementRegistry.define()
○ First argument is name of the component
○ Second argument is class attached to said component
○ Third argument is options
5
Shadow DOM
● Shadow host - regular DOM node to which shadow dom is attached to
● Shadow boundary - boundaries component can change
● Shadow tree - similar to regular DOM structure
● Shadow root - the root of a shadow dome (similar to HTML tag)
6
Templates and slots
● <template>
○ Not rendered until you actually grab it with JS and render it somewhere
○ If you have some pieces of markup language that are reused
● <slot>
○ Helps to add flexibility
7
Current status of web components
● Custom components - not 100% supported by all browsers
● Shadow dom - fully supported
● HTML templates fully supported
● Web components used to have HTML imports, this is no longer the case
○ You’d still have to import them in your project
● High barrier of entry
○ Too complicated to use
8
Module federation - what it is?
● Allows loading separately compiled applications at runtime. Also, we can share
common dependencies.
○ Webpack config to create microfrontends
● Runtime dependency sharing
● Offloading UI parts to a different team
Awesome tutorials:
● https://www.youtube.com/watch?v=x22F4hSdZJM
● https://www.youtube.com/watch?v=D3XYAx30CNc
9
When to use module federation
● Large applications with multiple teams
○ You can share multiple screens between multiple pages
● Share UI snippets to other applications
○ Great example is login form or navigation
Examples can be found at
https://github.com/module-federation/module-federation-examples
10
How to use module federation
new ModuleFederationPlugin({
name: "comic",
filename: "remoteEntry.js",
exposes: {
"./XKCD": "./app.jsx",
},
shared: [
{
react: { singleton: true, eager: true },
"react-dom": { singleton: true, eager: true },
},
],
}),
new ModuleFederationPlugin({
name: "home",
remotes: {
comic: `comic@${URL}/remoteEntry.js`,
},
shared: [
{
react: { singleton: true, eager: true },
"react-dom": { singleton: true, eager: true },
},
],
}),
const XKCD = lazy(() => import("comic/XKCD"));
Expose Import
Use
11
How to use module federation
Examples
https://codesandbox.io/s/webpack-module-federation-forked-vzmqy7?file=/home
/webpack.config.js
https://stackblitz.com/github/webpack/webpack.js.org/tree/main/examples/modul
e-federation?file=README.md&terminal=start&terminal=
12
Project update
● Any questions?
● Free time to code your UIs
● Free time to discuss any problems
13
● Old
○ jQuery
○ Ajax
○ Single Session
○ Variables
○ IE drove it in the past
○ Lodash
○ Callback hell
○ Bootstrap
● New
○ Transpilers
○ JS is slowly moving towards functional
programming - map, lambda, reduce, etc.
○ SSO with JWT
○ Improved Browser API
○ Dependency hell
○ Build tools - module based codebase
○ Multiple free and opensource design systems
○ Virtual DOM, component architecture, pure
functions - React
Javascript practices - old and new
14
Lorem ipsum dolor sit amet, consectetuer
adipiscin elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore.
Body headline
Lorem ipsum dolor sit amet, consectetuer
adipiscin elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore.
Body headline
Lorem ipsum dolor sit amet, consectetuer
adipiscin elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore.
Body headline
Lorem ipsum dolor sit amet, consectetuer
adipiscin elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore.
Body headline
Single sign on/out/only
Popis problemu
15
● Two scenarios
○ Single page web application
○ Library to used in any further project
● All build processes managed from one place
○ Easy use once we have everything all set up
● We want to use the newest javascript goodies
● Some framework so we have easier DOM manipulation
● One package manager
Historie - aneb pred vice nez 5 lety
16 https://bower.io/blog/2017/how-to-migrate-away-from-bower/
● Bower was the main place to go for packages
○ It is slowly dying and on 02 Oct 2017 was announced that users should migrate to something else
● First there was Grunt
○ On 11 January 2012 this first task runner was introduced, it was a breakthrough in frontend
development.
○ Pros: Fairly simple, easy to use
○ Cons: Temporary files, piping one file trough multiple tasks was cumbersome
● Then there was Gulp.js
○ On 26 September 2013 was released taks runner that was heavily inspired by Grunt
○ Pros: Faster, file piping
○ Cons: Config can be really confusing to newcomers
● jQuery
○ Most hated and loved library to manipulate DOM
Proc to selhalo
17
● NPM took over because it simply had a lot more packages
● NPM also introduced several built in scripts, that ca be ran at certain point of installation/build
● Package managers now contain task runner
● Configs were too hard to maintain - few people really understood file piping
● Debugging of build process was not so easy
● Modern build tools have much better features
○ HTTP/2 code splitting
○ Built in minification
○ Built in sourcemaps
○ Tree shaking
○ And many more
Dnesni stav - package manager / task runner
18
● Yarn
○ Developed by Facebook
○ Supports workspaces - great for monorepos
○ Easier task runner and package installation
○ First to introduce lock file
● NPM
○ Developed by Google
○ Comes with node
○ Contains NPX
○ Convenient for larger teams spread across globe
● PNPN
○ Honorable mention - hard linking packages instead of downloading and installing
Dnesni stav - build nastroje
19
● Webpack
○ All purpose build tool
○ Extensive configuration options
○ Configuration is required
○ Extensible
● Parcel
○ Zero config file
● Rollup
○ Focus on building ES libraries
Nutnost transpileru, co to je?
20
● Babel
○ Javascript transpiler to provide backwards compatibility of new JS syntax quirks and fashion
○ Each file is parsed separately and compiled into native JavaScript
○ Huge collection of plugins - you can even write your own plugins
● Typescript
○ JavaScript flavor/superset with data types
○ Compiles into JavaScript
○ Custom plugins called Language Service Plugin - not that used as with babel
Babel config
21 [1] https://www.npmjs.com/package/babel-plugin-import
● Multiple formats
○ JS, JSON, ES6
● Option to write custom functions in plugins [1]
● BABEL_ENV to use different config per different environment
● Option to write config in package.json
{
"presets": [
[
"@babel/env",
{
"targets": "> 0.25%, not dead"
}
],
"@babel/react",
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"babel-plugin-lodash",
"@babel/plugin-proposal-class-properties"
]
}
Scenar: Webova aplikace - Parcel vs Webpack
22
● React application
● Dev server
○ Proxy to API
● HTML template
● Tree shaking
● One config to rule them all (dev vs prod)
● Custom envs from terminal/.env file
● Static files loader - images, styles
Scenar: Knihovna - Rollup vs Webpack
23
● React library
● Bundled to one file and to multiple files as well
● Externals
○ 3rd party libraries not bundled in final build
● Named vs Default exports
● Multiple environments
○ ESM, UMD, CommonJs
Conclusion library
24
● No native support for full ESM bundles
○ Webpack 5 promises to implement it
● Harder to set-up
● Easier to read
Webpack
● Everything has to be done through plugins +/●
Smaller bundle size
● Supports native ESM!
● Named exports
○ You need to list all named exports
Rollup
Conclusion - funny
25
● Webpack is like VIM
○ Hard to setup and if something breaks you have to really understand it
○ But the things that can be done with it are almost limitless
● Parcel is like MS word
○ No need to configure anything
○ If you need to tweak something up, it’s really hard to do
● Rollup is like VS Code
○ One of the greatest software for one thing
○ Handles poorly web apps
Many people experience our brand by seeing
one of the thousands of presentations
Red Hatters deliver each year.
From Summit keynotes to conference-room sales meetings, we want our public face
to be coherent and recognizable. Our content must be meaningful and relevant to
our audiences. Our stories should be told in a clear, compelling way.
Corporate slide templates
26
How to build an effective presentation
https://pnt.redhat.com/pnt/p-611879/
Getting started with Google Slides
https://gsuite.google.com/learning-center/products/slides/get-started/#!/
Red Hat brand standards
https://www.redhat.com/en/about/brand/standards
Red Hat brand assets
https://pnt.redhat.com/pnt/b-420952/Brand_assets
Updating the confidential designator:
Update the designator in Google Slides by choosing “Slide,” then “Edit Master.”
Copy the appropriate designation into the “Confidential designator” field in the upper right.
Corporate slide templates
27
Red Hat associate and NDA partner use only,
no further distribution
Change the designator on the master slide to:
CONFIDENTIAL Red Hat associate and NDA
partner use only, No further distribution
Use this designation for a confidential presentation intended
only for the Red Hat associate(s) and partner(s) with signed
NDA who receive the deck originally. The Red Hat and NDA
partner associate(s) who receive this deck cannot share it
with anyone—even other Red Hat and partner associate(s).
Red Hat associates only
Change the designator on the master slide to:
CONFIDENTIAL Red Hat associates only
Use this designation for a confidential
presentation that can only be shared with Red Hat
associates. The Red Hat associate(s) who receive
this deck can share it with other Red Hat
associate(s), but no one else.
Red Hat associates only, no further distribution
Change the designator on the master slide to:
CONFIDENTIAL Red Hat associates only,
No further distribution
Use this designation for a confidential
presentation intended only for the Red Hat
associate(s) who receive it originally. The Red Hat
associate(s) who receive this presentation cannot
share it with anyone—inside or outside of Red Hat.
QUICK TIP
Update or remove the confidential
designator on the master slide.
QUICK TIP
Update or remove the project number, event
name or hashtag on the master slide.
Corporate slide templates
28
This section
includes:
Title slide templates
Closing slide templates
Divider slide templates
linkedin.com/company/red-hat
youtube.com/user/RedHatVideos
facebook.com/redhatinc
twitter.com/RedHat
Red Hat is the world’s leading provider of enterprise
open source software solutions. Award-winning
support, training, and consulting services make
Red Hat a trusted adviser to the Fortune 500.
Thank you
29
Optional subheading
Presentation title should not
exceed two lines
Presenter’s Name
Title
Presenter’s Name
Title
30
QUICK TIP
If the presentation is not product focused, simply delete this. Do NOT insert the Red Hat logo here. If this is a
product-focused deck, right click on the logo and using “Replace Image” insert the product logo of your choice.
After replacing the image, right click and select “Reset Image”. Adjust spacing as needed.
linkedin.com/company/red-hat
youtube.com/user/RedHatVideos
facebook.com/redhatinc
twitter.com/RedHat
Red Hat is the world’s leading provider of enterprise
open source software solutions. Award-winning
support, training, and consulting services make
Red Hat a trusted adviser to the Fortune 500.
Thank you
31
32
Optional subheading Lorem ipsum dolor sit
amet consectetuer adipiscing elit sed diam
Presentation title
should not exceed
three lines
Presenter’s Name
Title
Optionalsectionmarkerortitle
linkedin.com/in/karelhala linkedin.com/in/coufaltom
github.com/karelhala github.com/tumido
33
Red Hat is the world’s leading provider of enterprise
open source software solutions. Award-winning support,
training, and consulting services make Red Hat a trusted
adviser to the Fortune 500.
Thank you
Optionalsectionmarkerortitle
34
Optional section marker or title
Optional supporting copy.
Lorem ipsum dolor sit
amet, consectetuer adipis
elit, sed diam nonummy
nibh euismod tincidunt ut
laoreet. magna aliquam.
Divider title
limit to two lines
QUICK TIP
Try right clicking on the
photo and using “Replace
Image” to insert your own
photo. You are also welcome
to use this photo.
35
Optional section marker or title
Optional supporting copy.
Lorem ipsum dolor sit
amet, consectetuer adipis
elit, sed diam nonummy
nibh euismod tincidunt ut
laoreet. magna aliquam.
Divider title
limit to two lines
QUICK TIP
Try right clicking on the
photo and using “Replace
Image” to insert your own
photo. You are also welcome
to use this photo.
36
Optional section marker or title
Divider title
limit to two lines
Optional supporting copy.
Lorem ipsum dolor sit
amet, consectetuer adipis
elit, sed diam nonummy
nibh euismod tincidunt ut
laoreet. magna aliquam.
QUICK TIP
Try right clicking on the
photo and using “Replace
Image” to insert your own
photo. You are also welcome
to use this photo.
Lorem ipsum dolor sit
amet, consectetuer
adipisc elit sed dia nibh?
Optionalsectionmarkerortitle
37
Lorem ipsum dolor sit
amet, consectetuer
adipisc elit sed dia nibh?
38
Optional section marker or title
39
Optionalsectionmarkerortitle
Lorem ipsum
dolor sit amet,
consectetuer
adipisc elit?
Corporate slide templates
40
This section
includes:
Agenda slide templates
Content slide templates
Quote slide templates
What we’ll
discuss today
Agenda
41 Source:
Insert source data here
Insert source data here
Insert source data here
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Label
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
42
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud
exerci tation ullam.
00%
Lorem ipsum
dolor sit amet
00%
Lorem ipsum
dolor sit amet
00%
Lorem ipsum
dolor sit amet
00%
Lorem ipsum
dolor sit amet
00%
Lorem ipsum
dolor sit amet
00%
Lorem ipsum
dolor sit amet
QUICK TIP
To edit a chart, select it and click the dropdown arrow in the top right.
Select “Open source.” The legend will need to be updated manually.
What we’ll
discuss today
Agenda
43 Source:
Insert source data here
Insert source data here
Insert source data here
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Topic
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Optional section marker or title
44
QUICK TIP
Insert image in this designated area, deleting the shaded background. Keep the left
and right margins clear to maintain the open feel in accordance with the brand.
If no subheading is needed, delete the subheading text, and the content can
extend into the lighter shaded area.
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Optional section marker or title
45 Source:
Insert source data here
Insert source data here
Insert source data here
QUICK TIP
Insert image in this designated area, deleting the shaded background. Keep the
left, right, top, and bottom margins clear to maintain the open feel in accordance
with the brand.
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
46
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend laoreet
eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et,
varius purus. Etiam interdum nunc non venenatis rutrum. Phasellus venenatis,
sem ac vulputate facilisis, lacus augue vehicula quam. Aenean eleifend laoreet
eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et,
varius purus.
▸ Etiam interdum nunc non venenatis rutrum
▸ Phasellus venenatis sem ac vulputate facilisis
▸ Aenean eleifend laoreet eros eu molestie arcu tempus
▸ Quisque vitae nisl accumsan aliquet
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
47 Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend laoreet
eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et,
varius purus. Etiam interdum nunc non venenatis rutrum. Phasellus venenatis,
sem ac vulputate facilisis, lacus augue vehicula quam. Aenean eleifend laoreet
eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et,
varius purus.
▸ Etiam interdum nunc non venenatis rutrum
▸ Phasellus venenatis sem ac vulputate facilisis
▸ Aenean eleifend laoreet eros eu molestie arcu tempus
▸ Quisque vitae nisl accumsan aliquet
Optional section marker or title
48 Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend laoreet
eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et,
varius purus. Etiam interdum nunc non venenatis rutrum. Phasellus venenatis,
sem ac vulputate facilisis, lacus augue vehicula quam. Aenean eleifend laoreet
eros, eu molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et,
varius purus.
▸ Etiam interdum nunc non venenatis rutrum
▸ Phasellus venenatis sem ac vulputate facilisis
▸ Aenean eleifend laoreet eros eu molestie arcu tempus
▸ Quisque vitae nisl accumsan aliquet
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
49
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aenean eleifend laoreet eros, eu molestie arcu
tempus ac. Quisque vitae nisl accumsan, aliquet est et,
varius purus. Etiam interdum nunc non venenatis.
▸ Etiam interdum nunc non venenatis rutrum
▸ Phasellus venenatis sem ac vulputate facilisis
▸ Aenean eleifend laoreet eros eu molestie arcu tempus
▸ Quisque vitae nisl accumsan aliquet
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aenean eleifend laoreet eros, eu molestie arcu
tempus ac. Quisque vitae nisl accumsan, aliquet est et,
varius purus. Etiam interdum nunc non venenatis.
▸ Etiam interdum nunc non venenatis rutrum
▸ Phasellus venenatis sem ac vulputate facilisis
▸ Aenean eleifend laoreet eros eu molestie arcu tempus
▸ Quisque vitae nisl accumsan aliquet
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean eleifend laoreet eros, eu
molestie arcu tempus ac. Quisque vitae nisl
accumsan, aliquet est et, varius purus. Etiam
interdum nunc non venenatis rutrum. Phasellus
venenatis, sem ac vulputate facilisis, lacus augue
vehicula quam.
Optional section marker or title
50 Source:
Insert source data here
Insert source data here
Insert source data here
QUICK TIP
Try right clicking on the photo and
using “Replace Image” to insert
your own photo. You are also
welcome to use this photo.
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
51
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
QUICK TIP
Try right clicking on the photo and
using “Replace Image” to insert
your own photo. You are also
welcome to use this photo.
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend laoreet eros, eu
molestie arcu tempus ac. Quisque vitae nisl accumsan, aliquet est et, varius purus. Etiam
interdum nunc non venenatis rutrum. Phasellus venenatis, sem ac vulputate facilisis, lacus
augue vehicula quam, pellentesque pulvinar elit magna posuere magna.
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
52
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh mod tincidunt.
Body headlineBody headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh mod tincidunt.
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh mod tincidunt.
QUICK TIP
Try right clicking on
the photo and using
“Replace Image” to
insert your own photo.
You are also welcome
to use this photo.
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
53
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh mod tincidunt.
Body headlineBody headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh mod tincidunt.
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh mod tincidunt.
QUICK TIP
Try right clicking on the icon and using
“Replace Image” to insert your own icons.
Optional section marker or title
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh
euismod tincidunt ut laoreet
54
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet dolore magna
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.
Body headline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.
Body headline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.
Body headline
QUICK TIP
Try right clicking on the icon and using
“Replace Image” to insert your own icons.
Body headline
Lorem ipsum dolor sit amet, consectet adipiscing elit sed
dia.
Body headline
Lorem ipsum dolor sit amet, consectet adipiscing elit sed
dia.
Body headline
Lorem ipsum dolor sit amet, consectet adipiscing elit sed
dia.
Body headline
Lorem ipsum dolor sit amet, consectet adipiscing elit sed
dia.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
55
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
QUICK TIP
Try right clicking on the icon and using
“Replace Image” to insert your own icon.
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
56
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh
euismod tincidunt.
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh
euismod tincidunt.
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh
euismod tincidunt.
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh
euismod tincidunt.
Body headline
QUICK TIP
Try right clicking on the icon and using
“Replace Image” to insert your own icons.
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
57
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet, consectetuer
adipiscin elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore.
Body headline
Lorem ipsum dolor sit amet, consectetuer
adipiscin elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore.
Body headline
Lorem ipsum dolor sit amet, consectetuer
adipiscin elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore.
Body headline
Lorem ipsum dolor sit amet, consectetuer
adipiscin elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore.
Body headline
QUICK TIP
Try right clicking on the icon and using
“Replace Image” to insert your own icons.
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
58
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Label Label Label
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
59
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet,
consectetuer adipiscin elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet dolore.
Lorem ipsum dolor sit amet,
consectetuer adipiscin elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet dolore.
Lorem ipsum dolor sit amet,
consectetuer adipiscin elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet dolore.
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
60
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet, consectetuer
adipiscin elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore.
Lorem ipsum dolor sit amet, consectetuer
adipiscin elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore
Optional section marker or title
61 Source:
Insert source data here
Insert source data here
Insert source data here
“Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis id auctor dui. Ut neque
sem, convallis sit amet ultrices et, facilisis
vestibulum ligula. Donec euismod elementum
erat vitae fermentum. Mauris hendrerit
maximus bibendum.”
John Doe
CTO, Acme Unlimited
QUICK TIP
Using a photo with the large quote is optional. Try right clicking
on the photo and using “Replace Image” to insert your own photo.
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
62
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
John Doe
CTO, Acme Unlimited
“Lorem ipsum dolor sit amet, consectetuer
adipis elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullam.”
John Doe
CTO, Acme Unlimited
“Lorem ipsum dolor sit amet, consectetuer
adipis elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullam.”
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
63
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
John Doe
CTO, Acme Unlimited
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet dolore magna
aliquam erat volutpat.
John Doe
CTO, Acme Unlimited
John Doe
CTO, Acme Unlimited
Optional section marker or title
64
This section
includes:
Data slide templates
Table slide templates
Timeline slide templates
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
65
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat.
65%
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat.
82%
QUICK TIP
Use darker shades of Red Hat red to
differentiate between data points.
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
66
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud
exerci tation ullam.
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod.
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod.
00% 00%
QUICK TIP
To edit a chart, select it and click the dropdown arrow in the top right.
Select “Open source.” The percentage will need to be updated manually.
00% 00% 00%
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
67
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh euismod.
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh euismod.
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh euismod.
QUICK TIP
To edit a chart, select it and click the dropdown arrow in the top right.
Select “Open source.” The percentage will need to be updated manually.
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
68
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud
exerci tation ullam.
000 000
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod.
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod.
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
69
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
000 000 000
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh euismod.
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh euismod.
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh euismod.
Body headline
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
70
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
QUICK TIP
To edit a chart, select it and click the dropdown
arrow in the top right. Select “Open source.”
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
71
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
01 Title of chart
00% Lorem ipsum
00% Lorem ipsum
00% Lorem ipsum
00% Lorem ipsum
00% Lorem ipsum
00% Lorem ipsum
Lorem ipsum
dolor sit amet
Lorem ipsum
dolor sit amet
QUICK TIP
Use the “Width Scale” in the “Size & Position” pane of the format
options panel to adjust the percentage of the bar.
Optional section marker or title
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh
euismod tincidunt ut laoreet
72
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet dolore magna
Source:
Insert source data here
Insert source data here
Insert source data here
00% Lorem ipsum
00% Lorem ipsum
00% Lorem ipsum
00% Lorem ipsum
00% Lorem ipsum
00% Lorem ipsum
00% Lorem ipsum
00% Lorem ipsum
Lorem ipsum
dolor sit amet
Lorem ipsum
dolor sit amet
01 Title of chart
QUICK TIP
Use the “Width Scale” in the “Size & Position” pane of the format
options panel to adjust the percentage of the bar.
Optional section marker or title
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh
euismod tincidunt ut laoreet
73
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed
diam nonummy nibh euismod
tincidunt ut laoreet dolore magna
Source:
Insert source data here
Insert source data here
Insert source data here
Column header
two lines maximum
Column header
two lines maximum
Column header
two lines maximum
Row header with
two lines maximum
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Row header with
two lines maximum
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Row header with
two lines maximum
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Row header with
two lines maximum
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Row header with
two lines maximum
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Row header with
two lines maximum
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Row header with
two lines maximum
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
01 Title of table
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
74
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Column header
two lines maximum
Column header
two lines maximum
Column header
two lines maximum
Column header
two lines maximum
Column header
two lines maximum
Row header with
two lines maximum
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Row header with
two lines maximum
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Row header with
two lines maximum
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Row header with
two lines maximum
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Row header with
two lines maximum
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Row header with
two lines maximum
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
Body cell should be
limited to two lines
01 Title of table
Optional section marker or title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
75
Duis vel mauris aliquet, aliquam velit eu, euismod lorem.
Source:
Insert source data here
Insert source data here
Insert source data here
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
diam nonummy nibh euismod.
20XX
20XX
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
diam nonummy nibh euismod.
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
diam nonummy nibh euismod.
20XX
20XX
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
diam nonummy nibh euismod.
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
diam nonummy nibh euismod.
20XX
20XX
Body headline
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
diam nonummy nibh euismod.
Optional section marker or title
76 Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sedie
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.
Heading
QUICK TIP
Try right clicking on the photo and
using “Replace Image” to insert your
own photo. You are also welcome to
use this photo.
Optional section marker or title
77
Heading
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet, consectet adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolor aliquam.
20XX
Heading
Lorem ipsum dolor sit amet, consectet adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolor aliquam.
Heading
Lorem ipsum dolor sit amet, consectet adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolor aliquam.
20XX
QUICK TIP
Try right clicking on the photo and
using “Replace Image” to insert your
own photo. You are also welcome to
use this photo.
Optional section marker or title
78
Heading
Source:
Insert source data here
Insert source data here
Insert source data here
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sedie
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.
QUICK TIP
Try right clicking on the photo and
using “Replace Image” to insert your
own photo. You are also welcome to
use this photo.