create-hyper-mendix-widget
Version:
create a hyper mendix widget
241 lines (205 loc) • 7.08 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Create Hyper Mendix Widget</title>
<meta name="description" content="Cli tool for generating Hyper Mendix Widget">
<meta name="author" content="Osama Mohammad Najjar">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/white.css" id="theme">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<link rel="stylesheet" href="css/custom.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h2>create-hyper-mendix-widget</h2>
<blockquote class="full-width">
“A CLI tool for generating <a href="#/1"><strong class="underline">Hyper Mendix Widgets</strong></a>”
</blockquote>
<div class="logo-wrapper">
<a href="#">
<img src="./img/hyperlogo.png" class="logo hyper" alt="">
</a>
<a href="https://hypermendixwidgetd-sandbox.mxapps.io/index.html?profile=Responsive">
<img src="./img/mxlogo.png" class="logo" alt="">
</a>
<a href="https://github.com/omnajjar/create-hyper-mendix-widget">
<img src="./img/github.svg" class="logo" alt="">
</a>
<a href="https://www.npmjs.com/package/create-hyper-mendix-widget"><img src="./img/npm.png" class="logo" alt=""></a>
</div>
</section>
<section>
<section>
<h2>⚡ Hyper Mendix Widget? 🤔</h2>
<p>
It is a design pattern for creating mendix widgets, by which we split widgets' creation into two main independent
responsibilities, the first one is passing widget's props & mouting widget to the DOM, and the second one is
building widget's core functionality.
</p>
</section>
<section>
<h2>In other words ✋</h2>
<p>
It is a mendix widget that makes use of dojo for only passing widgets'
properties
and mounting the widget to the DOM,
& Any other javascript framework or library for building widget structure &
functionality (e.g React, Vue, Hyperapp, JQuery, ...etc).
</p>
<small class="small-text"><i>(Please note that dojo here is considered as a part of mendix, as mx dojo _widgitbase
will receive widgets props which is set in the modeler, however dojo will be any other props injecter or widgets
loader.)</i></small>
</section>
</section>
<section>
<h2>Advantages 🏅</h2>
<ul>
<li>Bring in ~ all Js frameworks out there together with Mendix.</li>
<li>Write complex widgets with more confidence.</li>
<li>Don't mix platform/frameworks/libraries with each other.</li>
<li>👉 Instead provide a communication protocol.</li>
<li>Free up widgets' testing from the modeler => faster development.</li>
<li>Enable TDD (Test Driven Development).</li>
<li>Improve Developer Experience (DX).</li>
</ul>
</section>
<!-- Example of nested vertical slides -->
<section>
<section>
<h2>CLI Instalation & Usage 💻</h2>
</section>
<section>
<h2>1. Global Instalation</h2>
<pre class="code">
<code class="bash hljs" data-trim contenteditable>
.......
//in your terminal or cmd
$ npm install -g create-hyper-mendix-widget
.......
</code>
</pre>
</section>
<section>
<h2>2. Run</h2>
<img src="./img/cm_run.PNG" alt="">
</section>
<section>
<h2>3. Available Scripts</h2>
<pre class="code">
<code class="bash hljs c-code" data-trim contenteditable>
.......
//in your terminal or cmd run the following script for a dev build:
$ npm run dev
// and for production build run the following script:
$ npm run build
.......
</code>
</pre>
</section>
</section>
<section>
<h2>Available Implementations 😎</h2>
<ul>
<li>React.</li>
<li>Vue.</li>
<li>Hyperapp.</li>
<li>JQuery!</li>
<li>ES6 Vanilla Javascript.</li>
<li>More frameworks are commig soon...!! </li>
</ul>
<p>
<a href="https://github.com/omnajjar/create-hyper-mendix-widget">
<img src="./img/github.svg" class="logo" alt="">
</a>
</p>
</section>
<section>
<h1>Thanks!</h1>
<h2>Q&A</h2>
<div class="logo-wrapper">
<a href="#">
<img src="./img/hyperlogo.png" class="logo hyper" alt="">
</a>
<a href="https://hypermendixwidgetd-sandbox.mxapps.io/index.html?profile=Responsive">
<img src="./img/mxlogo.png" class="logo" alt="">
</a>
<a href="https://github.com/omnajjar/create-hyper-mendix-widget">
<img src="./img/github.svg" class="logo" alt="">
</a>
<a href="https://www.npmjs.com/package/create-hyper-mendix-widget"><img src="./img/npm.png" class="logo" alt=""></a>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [{
src: 'lib/js/classList.js',
condition: function () {
return !document.body.classList;
}
},
{
src: 'plugin/markdown/marked.js',
condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/markdown/markdown.js',
condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/highlight/highlight.js',
async: true,
callback: function () {
hljs.initHighlightingOnLoad();
}
},
{
src: 'plugin/search/search.js',
async: true
},
{
src: 'plugin/zoom-js/zoom.js',
async: true
},
{
src: 'plugin/notes/notes.js',
async: true
}
]
});
</script>
</body>
</html>