diff --git a/README.md b/README.md index c52640d..ae241c1 100644 --- a/README.md +++ b/README.md @@ -208,6 +208,8 @@ And a valid document: ## CGI script +![cgi](images/cgi.svg.png "CGI") + The classic way to run programs when accessing a url is to use the Common Gateway Interface (CGI). In the [Apache httpd web server](https://httpd.apache.org/docs/2.4/howto/cgi.html) you can configure a directory as a ScriptAlias, when visiting a file inside that directory the file will be executed. The executable can read the request body from the stdin for and the response must be printed to the stdout. @@ -312,6 +314,8 @@ The problem with CGI scripts is when the program does some initialization, you h ## Web framework +![flask](images/flask.svg.png "Flask") + A web framework is an abstraction layer for making web applications. It takes care of mapping a request on a certain url to a user defined function. And mapping the return of a user defined function to a response like an HTML page or an error message. ## Python @@ -595,6 +599,8 @@ docker stop some-redis ### Web service +![swagger](images/swagger.svg.png "Swagger") + A web application is meant for consumption by humans and web service is meant for consumption by machines or other programs. So instead of returning HTML pages a web service will accept and return machine readable documents like JSON documents. A web service is an application programming interface (API) based on web technologies. @@ -709,6 +715,8 @@ curl -X POST "http://localhost:8080/api/newtonraphson" -H "accept: application/j ## JavaScript +![wasm](images/wasm.svg.png "WebAssembly") + JavaScript is the de facto programming language for web browsers. The JavaScript engine in the Chrome browser called V8 has been wrapped in a runtime engine called Node.js which can execute JavaScript code outside the browser. @@ -927,6 +935,8 @@ The result of root finding was calculated using the C++ algorithm compiled to a ## Single page application +![react](images/react.svg.png "React") + In the [Web application](#web-application) section, a common approach is to render an entire HTML page even if a subset of elements requires a change. With the advances in the web browser (JavaScript) engines including methods to fetch JSON documents from a web service, it has become possible to address this shortcoming. The so-called [Single Page Applications](https://en.wikipedia.org/wiki/Single-page_application) (SPA) enable changes to be made in a part of the page without rendering the entire page. To ease SPA development, a number of frameworks have been developed. The most popular front-end web frameworks are (as of July 2019): - [React](https://reactjs.org/) @@ -1239,16 +1249,6 @@ The form [by default](https://react-jsonschema-form.readthedocs.io/en/latest/usa ``` -The react-jsonschema-form component normally renders an integer with a updown selector. To use a range slider instead configure a [user interface schema](https://react-jsonschema-form.readthedocs.io/en/latest/quickstart/#form-uischema). - -```{.js #jsonschema-app} -const uiSchema = { - "guess": { - "ui:widget": "range" - } -} -``` - The values in the form must be initialized and updated whenever the form changes. ```{.js #jsonschema-app} @@ -1268,7 +1268,6 @@ The form can be rendered with ```{.jsx #jsonschema-form} { /* this JavaScript snippet is later referred to as <> */}
+ + + + + + + + + image/svg+xml + + + + + + + + + + C++ code + + + + web service + + + Common Gateway Interface Apache httpd + + diff --git a/images/cgi.svg.png b/images/cgi.svg.png new file mode 100644 index 0000000..ed7c0dc Binary files /dev/null and b/images/cgi.svg.png differ diff --git a/images/flask.svg b/images/flask.svg new file mode 100644 index 0000000..d5e373b --- /dev/null +++ b/images/flask.svg @@ -0,0 +1,149 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + C++ code + + + + + + + web app + + C++ to Python bindings Flask + + diff --git a/images/flask.svg.png b/images/flask.svg.png new file mode 100644 index 0000000..1d81c5f Binary files /dev/null and b/images/flask.svg.png differ diff --git a/images/react.svg b/images/react.svg new file mode 100644 index 0000000..6231095 --- /dev/null +++ b/images/react.svg @@ -0,0 +1,155 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + C++ code + + + + web app + + + WebAssembly to JavaScript bindings Emscripten React + + diff --git a/images/react.svg.png b/images/react.svg.png new file mode 100644 index 0000000..5f934fb Binary files /dev/null and b/images/react.svg.png differ diff --git a/images/swagger.svg b/images/swagger.svg new file mode 100644 index 0000000..d386592 --- /dev/null +++ b/images/swagger.svg @@ -0,0 +1,164 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + C++ code + + + + + web service + + + + C++ to Python bindings OpenAPI / Swagger Connexion + + + diff --git a/images/swagger.svg.png b/images/swagger.svg.png new file mode 100644 index 0000000..73df416 Binary files /dev/null and b/images/swagger.svg.png differ diff --git a/images/wasm.svg b/images/wasm.svg new file mode 100644 index 0000000..f97dc1d --- /dev/null +++ b/images/wasm.svg @@ -0,0 +1,143 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + C++ code + + + + web service + + + WebAssembly to JavaScript bindings Emscripten + + diff --git a/images/wasm.svg.png b/images/wasm.svg.png new file mode 100644 index 0000000..bfa6625 Binary files /dev/null and b/images/wasm.svg.png differ diff --git a/src/js/jsonschema-app.js b/src/js/jsonschema-app.js index e625ba5..37935eb 100644 --- a/src/js/jsonschema-app.js +++ b/src/js/jsonschema-app.js @@ -23,11 +23,6 @@ function App() { } // this JavaScript snippet is appended to <> const Form = JSONSchemaForm.default; - const uiSchema = { - "guess": { - "ui:widget": "range" - } - } // this JavaScript snippet is appended to <> const [formData, setFormData] = React.useState({ epsilon: 0.001, @@ -61,7 +56,6 @@ function App() { { /* this JavaScript snippet is later referred to as <> */}