Modular Web
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Subtitle |
| |
| Title of Series | ||
| Number of Parts | 95 | |
| Author | ||
| License | CC Attribution 4.0 International: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/32272 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
FrOSCon 201775 / 95
4
8
9
15
20
22
23
24
25
27
29
32
36
37
38
39
40
45
46
47
48
49
50
51
53
54
59
63
64
65
74
75
76
79
83
84
86
87
88
89
91
92
93
94
95
00:00
FreewareOpen sourceModul <Datentyp>Observational studyDemonComputer wormSummierbarkeitMessage passingSoftware developerFreewareWorld Wide Web ConsortiumCASE <Informatik>XMLComputer animation
00:52
WebsiteMeta elementComputer wormOrder (biology)Uniform resource locatorSpeciesInformationIndependent set (graph theory)AreaContent (media)Web pageTime zoneElement (mathematics)NumberStandard deviationElectronic mailing listAutonomous System (Internet)Semantics (computer science)Extreme programmingCartesian coordinate systemCASE <Informatik>Complex (psychology)World Wide Web ConsortiumWeb applicationXMLComputer animation
01:48
Scripting languageRevision controlSemantics (computer science)Element (mathematics)Web browserExecution unitScripting languageSemantics (computer science)Complete metric spaceElement (mathematics)CodeStructural loadProcess (computing)Machine visionGroup actionDigital rights managementXMLComputer animation
02:49
WebsiteMeta elementData modelVideo game consoleOptical disc driveWide area networkComputer wormMenu (computing)RankingDynamic random-access memorySummierbarkeitTelephone number mappingDigital object identifierFunctional (mathematics)Execution unitComplex (psychology)Complete metric spaceElement (mathematics)Single-precision floating-point formatCartesian coordinate systemXMLComputer animation
03:33
Term (mathematics)Semantics (computer science)Element (mathematics)Revision controlScripting languageWeb browserSineElectric generatorFingerprintVideoconferencingModul <Datentyp>Menu (computing)Lemma (mathematics)Simultaneous localization and mappingExecution unitModel theoryExecution unitComplex (psychology)Independence (probability theory)Flow separationCartesian coordinate systemPolarization (waves)AdditionVideoconferencingThermal conductivityFunctional (mathematics)World Wide Web ConsortiumSystem callBasis <Mathematik>Element (mathematics)BuildingSimilarity (geometry)RootMobile WebWeb applicationMobile appCodeHeegaard splittingContent (media)Modul <Datentyp>Complete metric spaceXMLComputer animation
05:45
InternetworkingPhase transitionWhiteboardFeedbackFingerprintMountain passGradientMobile appWeb applicationWorld Wide Web ConsortiumBit rateProtein foldingTheoryVideo gameComputer animation
06:30
Cross-site scriptingUsabilityCodeConfiguration spaceDialectLine (geometry)Electric generatorGamma functionSoftware developerVideoconferencingWorld Wide Web ConsortiumVideoconferencingComplex (psychology)Web applicationPublic domainAbstractionImage resolutionAdaptive behaviorCodeSoftware developerLine (geometry)Source codeCodeBit4 (number)RepetitionCartesian coordinate systemComputer animationXML
09:00
Hill differential equationMeta elementFormal languageComputer programmingMaxima and minimaHTMLElement (mathematics)Attribute grammarInterior (topology)Scripting languagePairwise comparisonOvalSource codeJSONLecture/Conference
09:43
outputDean numberFormal languageHTMLMarkup languageDuality (mathematics)Punched cardDrum memoryHypermediaNominal numberAdditionIndependence (probability theory)Semantics (computer science)Element (mathematics)Software developerScripting languageCorrespondence (mathematics)VideoconferencingResultantNeighbourhood (graph theory)Attribute grammarWorld Wide Web ConsortiumInterior (topology)FreewareSource codeComputer animation
10:44
Game theoryComputer programmingMeta elementFormal languageHTMLTime zoneHypertextCASE <Informatik>Server (computing)SoftwarePoint (geometry)FreewareWorld Wide Web ConsortiumFunctional (mathematics)Computer fileSineUniform resource locatorSource code
11:30
Lemma (mathematics)Modul <Datentyp>Function (mathematics)Digital signalDynamic random-access memoryFloating pointSummierbarkeitComputerSystem programmingComplex (psychology)SoftwareWitt algebraElectric generatorPersonal digital assistantSoftware developerClient (computing)Data modelContext awarenessGame theoryNormed vector spacePoint cloudMobile appConfiguration spaceFunctional (mathematics)SoftwarePoint (geometry)FreewareWorld Wide Web ConsortiumComplex (psychology)Modul <Datentyp>Mobile appProjective planePhysical systemMetropolitan area networkOrder (biology)Multiplication signResultantDegree (graph theory)WordAssociative propertyUniverse (mathematics)ExistenceData structureComputer fileCartesian coordinate systemWeb portalServer (computing)Configuration spaceMoment (mathematics)CodeComputer scienceAuditory maskingMereologyInformationsgesellschaftWeb applicationSoftware developerDirection (geometry)View (database)Process (computing)Office suiteoutputMedical imagingTraffic reportingForm (programming)Computer animationXML
15:49
Electronic meeting systemNumberMenu (computing)Content (media)Modul <Datentyp>Convex hullInternet forumExecution unitSummierbarkeitWhiteboardPlastikkarteForm (programming)InformationSharewareSlide ruleDiscrete element methodWeb portalConstructor (object-oriented programming)SoftwareMultiplication signPlotterFreewareWorld Wide Web ConsortiumInformationComputer fileProcess (computing)BitState of matterConfiguration spaceAddress spaceSharewareUniform resource locatorMobile appXMLUMLProgram flowchart
17:39
SummierbarkeitNormal (geometry)Text editorNormed vector spaceFile formatSlide ruleVotingShape (magazine)CAN busSoftware testingThumbnailSuite (music)NumberWebsiteMenu (computing)Form (programming)Electric generatorVideoconferencingoutputCodeIntegrated development environmentModemCAN busMobile appVideoconferencingInheritance (object-oriented programming)Configuration spaceComputing platformQuicksortUniverse (mathematics)CodeEmbedded systemResultantProgram flowchartComputer animationXML
18:26
Sign (mathematics)AutomationScripting languagePoint (geometry)Limit (category theory)Normal (geometry)Asynchronous Transfer ModeRepository (publishing)Control flowAddressing modeWeb pageMenu (computing)Table (information)Electronic mailing listLink (knot theory)Standard deviationDrag (physics)Element (mathematics)DemonFree variables and bound variablesComputer virusComputer programmingDemosceneInformationWindowVideoconferencingoutputCodeIntegrated development environmentComputer wormAuditory maskingoutputLengthForm (programming)CodeComputing platformUniverse (mathematics)Message passingElement (mathematics)Scripting languageConfiguration spaceGroup actionDatabaseFrequencyVarianceCartesian coordinate systemAttribute grammarEmbedded systemWeb applicationYouTubeMobile appKey (cryptography)Computer animationXML
19:56
Public domainSoftware frameworkDuality (mathematics)Content (media)Normed vector spaceWeb pageAcoustic shadowFrame problemEmailComputing platformVideoconferencingWorld Wide Web ConsortiumDifferent (Kate Ryan album)Event horizonPublic domainSoftware frameworkForm (programming)Computing platformReal-time operating systemTelecommunicationFrame problemEmbedded systemConnected spaceContent (media)WordCartesian coordinate systemVideoconferencingWeb pageWebsiteServer (computing)Arithmetic meanEncapsulation (object-oriented programming)XML
21:49
Addressing modeWhiteboardGraphic designInstant MessagingDemonACIDMoment (mathematics)Mobile WebCollaborationismComputing platformReal-time operating systemWebsiteComputer animation
22:44
VideoconferencingComputing platformDew pointData storage deviceAuthorizationFunctional (mathematics)Interface (computing)DatabaseCellular automatonVideoconferencingServer (computing)Data managementComputer animation
23:40
VideoconferencingComputing platformTelecommunicationWhiteboardAddressing modeSummierbarkeitBookmark (World Wide Web)Web pageFunctional (mathematics)Normed vector spaceWorld Wide Web ConsortiumClient (computing)Communications protocolServer (computing)Video gameWeb pageCodeBookmark (World Wide Web)Link (knot theory)Open setCore dumpScripting languageXMLComputer animation
24:50
Bookmark (World Wide Web)Cross-site scriptingGraphic designDokumentvorlageGoogolWorld Wide Web ConsortiumVolumeWebsiteWindowSlide rulePlastikkarteWeb pageElement (mathematics)Link (knot theory)VideoconferencingSound effectMobile appComputer animation
26:29
Bookmark (World Wide Web)Web pageFunctional (mathematics)Row (database)QuantumGraphical user interfaceSummierbarkeitSlide ruleMultiplication signInformationView (database)World Wide Web ConsortiumSource codeSet (mathematics)NumberComputer animation
27:23
Data modelWeb browserSoftware frameworkElement (mathematics)Acoustic shadowWeb serviceDigital rights managementStandard deviationSource codeFile formatSoftware frameworkWeb browserRevision controlWorld Wide Web ConsortiumContent (media)Model theoryData managementStandard deviationAcoustic shadowElement (mathematics)Computer fileWeb servicePhysical systemDigital rights managementMereologyWordFrequencyGreatest elementClient (computing)Lecture/ConferenceXML
30:03
Data modelWeb browserSoftware frameworkAcoustic shadowElement (mathematics)Digital rights managementWeb serviceStandard deviationSoftwareMaizeNetwork topologyPublic domainRevision controlTime zoneElectric generatorSoftware frameworkSoftwareFreewareParameter (computer programming)Web pagePublic domainParallel portRevision controlScripting languageMultiplication signResultantWritingNamespaceWorld Wide Web ConsortiumJust-in-Time-CompilerMetropolitan area networkMultiplicationInternetworking1 (number)Physical systemSound effectOpen sourceStructural loadNetwork topologyLecture/ConferenceComputer animation
32:27
Software frameworkParallel portSerial portPublic domainImage registrationWeb pageInstance (computer science)Embedded systemData storage deviceDisintegrationFunction (mathematics)Open sourceHand fanElement (mathematics)Physical systemImage registrationMultiplicationBitInstance (computer science)Multiplication signInclusion mapEmbedded systemObject (grammar)Software frameworkScripting languageWeb pageInterface (computing)Standard deviationEinbettung <Mathematik>Content (media)World Wide Web ConsortiumStructural loadFunctional (mathematics)AreaWebsiteData managementPhase transitionGroup actionMathematicsData storage deviceSerial portGame controllerInstallation artObject-oriented programmingOrientation (vector space)Slide ruleUltraviolet photoelectron spectroscopyVotingPoint (geometry)Form (programming)Workstation <Musikinstrument>System callBit rateComputer animation
35:34
Software frameworkParallel portSerial portPublic domainImage registrationWeb pageInstance (computer science)Embedded systemData storage deviceDisintegrationFunction (mathematics)Open sourceMaxima and minimaVolumenvisualisierungMIDIFunctional (mathematics)Software developerInstance (computer science)Spectrum (functional analysis)Revision controlComputer fontIncidence algebraWeb pageObservational studyAreaPhysical systemObject (grammar)Configuration spaceEmbedded systemRepresentation (politics)Level (video gaming)Uniform resource locatorComputer animationSource code
37:36
Embedded systemTemplate (C++)Instance (computer science)Moment (mathematics)Game controllerCodeLink (knot theory)Lecture/ConferenceSource codeXMLComputer animation
38:20
Line (geometry)Function (mathematics)Data conversionRevision controlInstance (computer science)Software development kitNamespaceScripting languageAnnulus (mathematics)Graphic designElement (mathematics)Classical physicsAreaGoodness of fitInstance (computer science)Power (physics)QuantumSoftware frameworkContent (media)World Wide Web ConsortiumComputer animation
39:37
Template (C++)Graphical user interfaceBit rateInstance (computer science)NumberSubsetComputer animation
40:25
Revision controloutputContent (media)OvalSuite (music)InformationModul <Datentyp>Level (video gaming)World Wide Web ConsortiumOpen sourceFood energyPoint cloudSoftwareSource codeSoftware developerWeb serviceData managementData storage deviceSet (mathematics)Digital rights managementDifferent (Kate Ryan album)Level (video gaming)Software frameworkUniformer RaumObject (grammar)Operator (mathematics)Limit (category theory)WebsiteFormal grammarTexture mappingPhysical systemPersonal digital assistantField (computer science)Universe (mathematics)Medical imagingComputer animation
41:51
CodeServer (computing)Communications protocolClient (computing)TelecommunicationLevel (video gaming)Different (Kate Ryan album)Real-time operating systemCASE <Informatik>Web pageDatabaseAxiom of choiceSet (mathematics)Data storage deviceFunctional (mathematics)MathematicsInterface (computing)MaizeMedical imagingFunctional (mathematics)Latent heatCellular automatonForm (programming)Category of beingComputer animation
43:09
Maxima and minimaDigital rights managementLevel (video gaming)Sanitary sewerNormed vector spaceGamma functionLevel (video gaming)Computer fileSet (mathematics)Web pageServer (computing)Data storage deviceUniform resource locatorInterface (computing)QuicksortLie groupPower (physics)Matching (graph theory)Sampling (statistics)State of matter
44:21
GoogolElement (mathematics)Acoustic shadowTemplate (C++)Computer wormUser interfaceGoodness of fitWorld Wide Web ConsortiumXMLComputer animationUML
45:08
Dynamic random-access memoryPrinciple of maximum entropyMultiplication signMobile appFocus (optics)LoginWorld Wide Web ConsortiumMechanism designInternetworkingHash functionINTEGRALGoodness of fitModel theoryClient (computing)Web browserScripting languageWebsiteMenu (computing)Server (computing)Computer fileYouTubePoint cloudExecution unitSign (mathematics)System callMessage passingRight angleLink (knot theory)Water vaporoutputSolid geometryState of matterSkeleton (computer programming)Disk read-and-write headDirection (geometry)Arithmetic meanInformation securityUniverse (mathematics)Physical lawView (database)NumberEquals signCuboidSet (mathematics)1 (number)CASE <Informatik>Process (computing)XMLUMLComputer animationLecture/Conference
53:18
MathematicsTerm (mathematics)AreaWebsiteVolumenvisualisierungConfiguration spaceSoftware developerSet (mathematics)Revision controlSocial classCategory of beingSystem callUMLComputer animation
54:30
SpacetimeDirection (geometry)Category of beingSystem identificationLecture/Conference
55:33
Open sourceFreewareEvent horizonComputer animation
Transcript: English(auto-generated)
00:07
Yeah, I think all works and yeah, hello, my name is Henri Classe and I welcome you to this talk. And in this talk, I would like to draw your attention to the modular web and to the possibilities
00:24
that it offers to free software developers to shape the world. So, to be clear that we speak the same of the same, what do I mean with a modular web?
00:43
To make sure that my message really arrives with something, we start with something we all know with HTML. Okay, I must come into.
01:07
Okay, in HTML, there is a fixed predefined and largely standardized number of HTML elements. We all know about and here you see one of the most popular HTML references which list all predefined HTML elements.
01:23
The upcoming web standards of web components now allow us to add our own custom HTML elements and provides them with their own semantics. To clarify the scope of the resulting possibilities, in extreme case, even a complex web application
01:43
can be defined as a semantics of such an HTML element. To illustrate this, I have here an example in which a complete learning unit is packaged as an HTML element.
02:00
So, my mouse, where's my mouse? Not there. Okay, I'll try to touch that. Okay. Here's a simple HTML example. You see, I simply have a script tag which loads in JavaScript and the JavaScript has
02:29
a code in there which defines a custom HTML element and defines its semantics. And after the script is run, the created custom HTML tag is ready to use.
02:44
Yeah, here is it in use. And now we can have a look. Here you see a complete learning unit in one HTML element.
03:00
So, here you see also deeper functionality than that, for example, a quiz or a fill-in-the-gap text. And this for sure is only one single HTML element.
03:22
The whole application is in one HTML element. So, okay, I'm not good in English, I twice.
04:00
Okay. However, the packaging of web applications in HTML elements alone is cool but not yet what makes the modular web. The modular web is all about modularity. Imagine you want to program a learning unit that consists of a video followed by a quiz
04:20
with a video also being able to be commented and rated. In the content of the modular web, we do not reinvent the wheel but first look at the web to see if someone has already developed a web component that provides the functionality what we need. Instead of building a complex web application that is difficult to maintain, we build it
04:42
from already existing, small, manageable, loosely coupled units. In this way, complexity cannot arise at all. When someone writes a web component with higher complexity, he's probably wrong and should think about splitting the component into several independent components.
05:06
Now, if the root component essentially only contains the code by which other components compile and composed into a loose coupled units.
05:24
The way in which web applications are built is similar in the modular web to the building of Lego building bricks. Here I have two mobile web apps that were implemented on the basis of web components. Each of these apps offers a complete German semester course.
05:47
The app comes with components for news, chat, forum, menus, videos, quizzes, and ratings. The app itself is also a component that reuses the components that components mentioned.
06:03
So we can have a live look at the mobile web app. Here we have it. So this is completely built with web components. The whole app is a web component and it reuses components here for news.
06:20
Like I say, here we have a chat, we have a forum, and other things like waiting and videos and also quizzes. So we have a complex web app only built up with web components.
06:43
So next, the Lego-like build of web applications from web components is a great thing, but the full strength of the modular web only shows up when the component reaches a high quality. The challenge when creating a web component is that it can be customized by simply configuring
07:04
it so that it can be used in different domains without having to adapt the source code of the component. All the resources of the component must always be interchangeable.
07:21
Also only a few hundred lines of code. If you have more, you have probably already done something wrong. Any good developer can solve problems in high quality through complex code, but a very good developer achieves this also with few and easily understandable lines of code.
07:45
The most important ability for this is the ability to abstraction. Code is comprehensible for other developers in a few hours.
08:03
Since a component does not have much code, the extra effort for a good documentation of the code is manageable. Yeah, another one, only one developer.
08:21
This has an advantage which cannot be underestimated that the developer can identify with this loosely coupled code. Usually he then attach more importance on its quality. As an example of a high adaptability of a web component, a brief example follows.
08:47
The example shows a short video in which a quiz is created and the quiz component is declared, declared, configured in HTML. So I try to start the video and here we have it.
09:11
So here we have the script tag and then comes the custom HTML tag. And now we've contributed with the HTML attributes and inner custom elements.
09:39
So here I'm back, okay.
09:50
Here again the result of the video. The web component for quiz is loaded with a script element. The corresponding HTML element is then ready for use.
10:03
An individual quiz is then created declaratively via additional inner HTML element and attributes. As with normal HTML elements, the developer of a web component can freely define which attributes and inner elements are followed for the custom HTML element and which semantics
10:21
they have. So now we already know a lot about the modular web. But why should this be so relevant for the free software development community? Why can we shape the world in a new way with it?
10:41
Well, just think about it. Let's take the quiz component as an example. You already know that the web component in my technology is simply a small JavaScript file. As you can see in the example, this file is free to find on the web. If you do not want to trust that the web component is always available at the web address,
11:05
you can download it and upload the component to a server of your trust. The component has also been released under free software reasons, as is the case for all components I produce. This means that everyone in the world can use the quiz component.
11:24
The web was therefore extended by the quiz functionality. So here's the main point. It follows immediately that any web component that has been released under free software reasons extends the functionality of the web as a whole.
11:43
That's the main point of this talk. In order to make you aware of the consequences, we think about it for a moment longer. Assuming the free software developer community is now starting to write and publish its
12:00
own components, each component expands the amount of web applications that can be achieved by composing components. These web applications are therefore part of the functionality that the web provides on its own, without the need for a company behind it.
12:22
Assuming that a company with a strong capital structure wants to prevent a company from being published because it sweetens the existence of its own commercial application. This is difficult because no one can now, can know who has the web component JavaScript file and published it somewhere else.
12:43
Even if you know all the servers and deleted the components there, still someone walk around with a USB stick containing the component. The point is that the modular web can lead to an unprecedented democratization
13:09
of the web, which no company, however powerful, can undermine. From my point of view, the modular web is a great step forward coming to the digital society.
13:25
For the modular web, of course, there are also much more consequences that could be clarified and be cast for a long time. So that we can also talk about other interesting things. Let's let it be good.
13:43
So, before we get further, first a few more words to my own person. I studied the bachelor's and master's degree in computer science at this university of applied sciences and I'm specialized in complex software systems.
14:02
I'm husband and father of two children and associate in a research project.
14:24
Okay, I would like to make a point here quite clear. I'm not guided by any company interests. I'm a free man that wants to increase the functionality of the web as a whole and fights for a free democratic web in which not a single company controls everything
14:42
because it has built a golden for good cage for all of us. So, before we know, okay, so before we know when the time allows it, have a closer look on my technology CCM. There's another important question to be clarified.
15:04
How do we find out which free web components are already available? In order to make this possible, I work with my colleagues on the web component cloud, shortly WWC.
15:21
This is a web portal through which web components can be published, found, tried, commented and rated. Above all, apps can be created from the components. A component plus a configuration results in an app. This means that a configuration can be created here for a component via an input mask.
15:44
As a result, you get an HTML embed code for the app you created. Okay. Please note that the web portal is still under construction, but feel free to explore what's already working.
16:03
So, we can look what's already there. Here's our web component cloud. So, the first time we have a place where we can find all free software web components. At this time, we have about 27 components, I guess.
16:26
Now, what we have here is the information, contact address. And here, for example, is the quiz component we have before. If I click on details, then I get a few informations about it.
16:41
Later, we can here create an app out of the component, create our own app, make the config on our own. And, yeah, here are the important URLs of the JavaScript files. This is all you need to use them in any HTML file you want.
17:03
And you have also a few pre-image. And, of course, that's already working live demo from the most components. Later, we have here a special button there. When you click on that, you can also create an app,
17:20
but you have as initial state the configuration of exactly this demo. And you can change a little bit, save it, and you have another app.
17:40
So, we're just starting to work on it, but we also have many components almost here. Okay, get back. And, yeah, here I have a short video which shows the creation of an app.
18:01
Concretely, this is the creation of a configuration for the fill-in-the-blank text component. The resulting embedding code is then embedded in the learning platform of this university. The co-workers were amazed that the learning platform could suddenly take on new things without the need for any extra effort.
18:27
So, let's look inside. So, this is an input mask from the fill-in-the-blank component. And there you get an embed code. Take it. Here it's a layout platform of this university.
18:42
Put it in. And, yeah, voila. Okay. I'm not a good speaker, but the message is good. Okay, let's get back.
19:03
Okay, here you see again the resulting embed code which consists of a script element and a custom HTML element. So, the created configuration can be stored in a data set, in a database, and can be used via the HTML elements key attribute.
19:28
Here you see the key attribute. There, this is with one key attribute value, you have the complete configuration. So, this HTML tag is one embed code like in YouTube video embed code.
19:42
It is a complete app. But instead of YouTube, here we have not video, so we have every web application we want. Okay, another question is, what can actually be implemented in the form of a web component?
20:04
Are there any restrictions? The answer is no. There are no restrictions in application domain. Everything that can be implemented with modern web technologies can also be implemented as a web component.
20:21
It may be composed of other components and other, and use other frameworks. Every component is embeddable on demand and cross-domain in every web-based content. Oh, I can explain it closer. So, on demand means, most of you know it, that a component is not only embeddable when a website is loaded.
20:44
It can also be included later. Cross-domain means that components must not be located on the same server as the actual website comes from. But it can be located on any other web server. With both aspects, any web user is able to embed a component in any currently viewed web page.
21:08
The embedding of a component works without iframe and uses shadowdome for CSS encapsulating.
21:22
Okay, when using my component technology, it is also very easy to implement cross-domain real-time communication. The following video demonstrates how the same component is embedded in two different learning platforms. And in this way, it is possible to suddenly collaborate between both learning platforms in real-time.
21:54
Oh, moment I started again. So, another platform.
22:00
I write something in there. In the other platform, we have it too. Yeah, okay. Yeah, so we have a cross-platform real-time collaboration. Yeah, think of it. You can have a chat component and you are on target show day and you are on Google day
22:27
and someone has it from a mobile website and all can collaborate with each other from very different places. Yeah, so go back.
22:58
Okay, I think questions later.
23:00
So, I repeat it. Oh, sorry. Okay. What's the background of the video was? The component use, I explained it later, but uses a CCM data store. My technology offers also data management functionality.
23:24
So, you have a CCM data store that can be managed data in a database you want, any database you want if you have an interface for the server. And then the server informs all other components,
23:44
all other clients with a WebSocket protocol and then it goes there. The WebSocket protocol is the answer. Okay. Okay.
24:02
Okay, because we could not see this so quickly in the small presentation, we try it again soon live. Does anyone know what a bookmarklet is?
24:23
For the others, a bookmarklet is a bookmark that does not open a web page. Instead, a small piece of JavaScript code is executed. This way, you can very well embed a component in a currently open web page. If you want to try it, you can.
24:43
To do this, you simply need to drag and drop one of the links from the given web page in the bookmark bar. Here we can have a look. Here are some links. And I can take, let's say, this quiz here. I take it there and now I can go.
25:02
If I click on it, my quiz comes here, but I can also go on any other page. Don't know, I take Wikipedia and also here I have my quiz. Okay, here it was simply embedded at first a child element of the body element.
25:27
We're working on that, that you get an on-the-fly window that you can drag and drop and resize and then you can bring your apps movable in any website you want.
25:42
So here, let's take again Wikipedia. Here I have a Kenman card. Here I can, as you know it from the video, and now I can try the same here. I go, I make it shorter.
26:03
Another website, don't know, WebDE. And I get the same component. And now I can, from WebDE to Wikipedia if I want. So that gives a lot of possibilities you can think about.
26:28
Okay, back to the slides. Okay, enough. So my main concern for this talk is to show you the possibilities and opportunities of the modular web.
26:47
And I think that's done now. You see many things, what's possible with the modular web. So how many time I have left?
27:03
Okay. Okay, in view of time, we now come to the concrete technology for which I now hopefully motivated you enough. Since a detailed introduction to the technology would blow up the time by far,
27:22
I will give you the most important basic data and show you where to find the source code and further informations. So, my technology is a client-side component model, shortly CCM.
27:41
If you have questions, then try it. So the client-side component model is a model for running web components inside the browser and this consists of a CCM framework and CCM components. CCM uses two features of the World Wide Web Consortium web component standard,
28:05
custom elements and shadow loom. The CCM framework provides two main services, one for embedding CCM components inside any web-based content and the other service for data management.
28:22
Yep. Okay. The framework is a tiny JavaScript file with about 37 kilobytes minified or 10 kilobytes if it's zipped. And uses standard JavaScript only, so ECMAScript 5 only.
28:46
It has no dependencies to other resources or frameworks. Before a year, I used jQuery in the framework because jQuery was like the air to breathe but I kicked it out.
29:01
The browsers are up to date today so have so many improved that no one needs jQuery, not for the kind of browser compatibility. The browsers are compatibility enough. Yeah, if you can use browser version.
29:22
I talk only about that. Yeah, I know these things but this kind of web technologies, it's not possible. As with polyfills, you can reach a lot of things. But I think only of the newest versions of the browser.
29:44
But mostly there are polyfills for just everything, including web components. But some polyfills, not quite good. Example for shadowdome. Shadowdome.
30:00
In Firefox, you will be angry. Yeah. Okay. Yeah, the same, the CCM framework is published as free software under MITD sense. Yeah, so you have the JIT up link.
30:21
It is loaded automatically when a component is used. And this is the reason why you don't see the CCM framework in the HTML examples. Normally, you have a script tag and then the framework comes in the web page. You don't have that. You only use the components and the framework will be loaded in the background.
30:45
Like the legal way, CCM components are recombinable. So this results in a dependency tree. These dependencies are automatically solved recursively and asynchronously by the CCM framework at one time.
31:04
The framework makes sure that all dependent resources are loaded in parallel and no resources loaded twice. Any dependent resource and data can be loaded across domain. The CCM framework and all CCM components are versioned and use semantic versioning.
31:24
So the common 2.0.0 writing. Yeah, the same component can be, that ensures backward compatibility. That's very important.
31:40
The last month, I only worked on that. So I don't can start this community, for example, when it's not backward compatibility. It don't make any sense, but now I have it. Okay. The same CCM component can be embedded multiple times in the same web page and also different versions of the component,
32:05
of a component without any conflicts and side effects. That is because each component and version has its own name space inside the web page. It is also possible to use different versions of the CCM framework in the same web page.
32:21
Yeah, so I definitely have backward compatibility now. Yeah, here, here you see the main interfaces of the CCM framework. Yeah, since the last year, they have not many changed, but inside they have changed a lot.
32:44
Before here, I don't use custom elements, I don't have ShadowDome, I only have JavaScript. Imbedding was only in JavaScript, and this year, I have used this HTML element, web standards. So each web component I use, when I use a script of a CCM component,
33:05
I automatically have the CCM custom element for this component. Yeah, the first interface, CCM load, that load is for loading resources.
33:20
So you have the much possibilities, you can control how it's serial loaded or parallel loaded, and all can be loaded cross domain, including data. As that works with JSON-P and CORS and such things, for example. CCM component is an interface for registration of CCM component in the web page.
33:46
In this interface, there's a functionality that creates a custom element, for example. Then we have system CCM instance, that's for creation of CCM instance out of a component.
34:02
That's for multiple embedding. If I don't have CCM instance, then only the component, I could only embed a component only one time in a web page. That will be very bad. For example, a waiting component, I have 10 commands, I want for every command, a waiting, I need it often.
34:27
So here we have a little bit, but only a little bit object orientation, so we can create instances out of a component. Then we have the start method, that starts the CCM instance,
34:42
that's normally what embeds the component. So if you hit the CCM start method, the two above are implicit included. When you hit start, the component will be loaded with CCM load, will be registered in the web page,
35:04
it will be created an instance out of the component, and hits the start method from this instance. And then you have your website area content. Then CCM store, that's counting on data management.
35:26
With CCM store, you get back a CCM data store, which comes in the next slides, how this exactly works. Okay, CCM helper also exists. There are many useful helper functions for component developers.
35:44
It's a good thing to have a look inside. It solves many problems that will be harder when you do it on your own. So here you see the levels of embedding of a CCM component.
36:01
Sure, I can move. And I hope you can see it. Not good font. Okay, here you have the URL of the component. Here's a configuration. And the configuration is only set, is only the website area of the component.
36:22
I hope it's set, but it can, it's dependent on the component you have, you can make such much more configuration things. But at the minimum, the website area must be defined. So in here we have a callback. So we have CCM component.
36:41
There we can give the URL of the component, and then the component will be loaded and registered in the web page. And then you get back the JSON object representation of the component. And from this object you can control of yourself
37:01
how many instances you want to create out of it. So here you can give the config, and you get one instance back and can hit the start, start method manually. So here's one level higher, a shortcut.
37:21
CCM instance, you get the URL, and this way you can see it called this. It gives us, registers the component in the web page. And you get an instance directly and can hit, oh, it must be called start, not when. Before here it was called when, and now it's start.
37:44
Okay, and then finally you have the start method. Normally this is the only method you must know, because this directly gives you and embeds the component. But if you have a component which we use as another component, you might want to have more control about it,
38:01
how you create instances out of it, and how you embed them. Okay, here what's the code of the CCM component? Here you have some links for a few examples.
38:24
Here's an example of the blank template, where you can build instances out of the component.
38:44
Here's a classical start method, and the classical hello world. With this element, you have access to your website area and you can set the content of it. And here you can do anything you normally do,
39:03
with other frameworks or whatever you want. You have the full power of the web and web technologies. Yeah, CCM only helps, this technology only helps you to getting all here. And it's capsuled in one HTML element. This is primarily all CCM do for you.
39:21
So you can embed it in any web-based content with one HTML tag. Okay, I go back here. So here I have not more, only a few minutes. So here's another example where you can see how to reuse two components in another component.
39:46
And the third example is a component where you have... The path is wrong. Okay, I correct the path later. And you have a component that reuses a component,
40:03
but you don't know how often you want to reuse a component. For example, you have comments, and you don't know how many comments you have, but you want a rating for every comment. So you don't know the number, how many rating instances you need. Then if you have such a situation, then this example is the correct thing for you.
40:24
And you can see all my developed component, many examples. They're also in the web component cloud. And here you can look into the source code. It's all MIT lead sense, all free software.
40:42
You can take it and do whatever you want with it, improve it, or whatever. Yeah, then we have data management. Oh, I have text here.
41:00
Okay, the CCM framework provides a service for component developers for data management. It allows the usage of CCM data stores. The CCM data stores can manage data sets in one of three data levels and can also be used autonomously of CCM components for easy data management. The different data levels are described below.
41:24
CCM data stores are intended to be universal and provide a simple uniform API for basic create, read, update, delete operations. On the first level, the data will be managed in local object.
41:41
Then all managed data sets are fugitive data which are gone when leaving the website. On the second level, the data will be managed in a client-side database. Then all managed data is still there after page reload. This is especially interesting for offline functionality.
42:01
On the third level for data, the data will be managed in a server-side database of choice. This is a classical way. The server must have a CCM compatible interface, then all managed data sets are stored persistently on the server
42:22
and they are not bound to a specific client. Different network protocols are possible for communication between client and server. In case of real-time communication with a WebSocket protocol for a CCM data store with data level three, the server informs every active client
42:42
about changing data sets. Then a CCM component which uses such a data store can react according to this change, mostly by updating the front-end immediately. Okay, here we have a code example where you see how to, if you have a CCM data store,
43:01
how you can use this. You have a simply get set interfaces. Here for setting and data sets, for getting and here for updating and deletion. And here upstairs, here at the top,
43:21
you see how you can get the CCM data store if you want to have one. Here you see how you can choose which data level, on which data level you want that the data sets are being managed. So you can give no parameter,
43:41
no settings, then you have data level one. Forget the data, it's gone on page reload. But you can, perhaps you can give initial data to the data store. Then you can have here the URL of a JSON file versus the initial data is inside.
44:03
If you want to have data level two, then you simply give the name of the data store. And here on data level three, you also must put in the URL of the server interface, which is compatible to CCM.
44:23
So, for the end, I know there are others out there. I know I'm not a good speaker here, but the thing what I have there, when you look close at it and when you look close about other things like what Google do, I have a very other few of web components
44:43
as Google, for example. And I don't think it's an against. It's more an interesting thing. What are my advantages? What are their advantages? And how they can work together.
45:02
So, that's it. Thanks for listening. Okay, now we come to the next one. Next time I do it in German.
45:24
Okay, then. My idea was I have a YouTube video and then it goes more away, but I'm not good enough in English. I must read. But I hope you get the message.
45:45
Yeah, okay. So, first question.
46:05
Okay, now this starts with a web component cloud. You need places where you find the web components and these places, it can be many places, must have a quality sign or something for the components. And you must trust in this web component cloud
46:23
or marketplace or something. Then you can get it there and download it and put it on your server of your choice or take it directly from there.
46:43
What do you mean with security?
47:03
I know this technology with the hash values is a good thing. But the web component cloud, the components don't add the web components cloud. There is only the link and the web component is on some server in the world.
47:21
And this one, it puts it on that server and published it in this web component and must, can make sure of that. So everyone is free. That's not, everyone is free to do that. There are no restriction from CCM to prevent it.
47:40
Yes.
48:14
Yeah.
48:28
Could it be done by a hash or with a component in the cloud? That's also the same question. The server must, the server who holds
48:41
the JavaScript file must care about this. That's not in my reach. I'm a client side component model and the server, but I can think about it that I have a mechanism that supports it. Better or easier, yeah.
49:01
Actually, it's called some resource integrity and it's a hash that you assign to the script tag that your component would invest for browser to load it. So in that case, you'd have to calculate the hash once and the component would know, I want that component,
49:22
but only if the hash matches and the browser checks it. So the check is done client side and you get some kind of integrity and you know that nothing has been tampered with. So that was also my thought would be great if something like that would be in there sometime soon because that would really make it much more secure.
49:42
Okay, good thing. You notice I don't make my focus on that before. Okay, another question. Yeah.
50:06
Okay, the question is what's about performance? Is there anything done for performance? We have tested, as a professor over here, I have tested a course app as component
50:22
and there we optimized it for performance. So we have, for example, a menu component we used in this app and we're preloading everything we want. So before a click happens, everything that could be needed for a click is loaded already.
50:42
We have, at start, a login button and in the time the user goes to the login button and wants to click, everything is loaded in the background and steps of it. So you click and then later steps will also be searched for anything that could be needed.
51:04
But this comes not for free. If you take care about it, you can get much performance. There are tricks like you must watch that your first call of the website is only under a specific kilobyte.
51:21
Then it's directly there. Then there are some tricks in the internet. And yeah, but that's possible. It was really fast. It's used in learning units and it was very cool. We must do it again. Question?
51:59
You mean?
52:15
I see. I don't... So this component, you must try to
52:25
set the marks of it and reload it statically, like the whole assembly? I don't get the question right there. Do you have?
52:42
We combine it and just send the results. Okay. We have tried this, yeah.
53:05
Okay. Other questions? Yeah.
53:20
Again. I'm not good in English or it's too...
53:47
Yes, it's... In the configuration of a component there are some config values that must always be there. But the rest is completely customizable.
54:01
If everything is set in the config, then it's up for you as a component developer to use it. It gives conventions some properties, the website area for example, but also the website area mustn't be set.
54:20
This is the reason why it doesn't call render. It now calls start because not every component must have a website area. It gives nearly no restrictions. They don't need it. Not at this pace, yeah.
54:46
There are some upcoming conventions for user identification. The user component is always at the property user. Then other things can know that automatically and then go some things better directly.
55:03
But it gives some points, but I don't remember all of them. No questions? Okay.
Recommendations
Series of 4 media