Hybrid apps?

[fairking]

This is awesome. Is there any plans to implement some kind of WebView, so we can port web SPA/PWA applications, the same way how tauri is doing? I am particularly interesting in Android. And of course I can rewrite my backend in vlang. ;-)

[malisipi]

Thank you for your attention. Embedding webview into same window is hard. So full-featured webview widget is like impossible. But you can look up vwebui if you can use webview inside another window. Also you can port your PWA application with Vebview.JS. But sad to say these solutions won't work inside Android.

[fairking]

Thanks for your reply, I hope there will be some solution to this, and it could be a deal breaker to bring more popularity to v language. I have several projects (Web/Electron) but there is no way to get them to mobile platforms, having a strong backend and native support. I am monitoring tauri, looks like they are currently working on the mobile support.

Why I am convinced to PWA over native UI:

• Compatibility, one app - all platforms including Web (whatever trend is);
• Flexibility, responsiveness, better touch support, animation, styling, many existing js/ui frameworks on the market;
• All professional frontend designers prefer html/js over any backend (strong typed) languages;
• Backend is strictly separated from the UI, so no spaghetti in the codebase;
• Small and big projects, easy for improvements and new features;

The way how I am used to implement such applications:
The backend has services (DI) and expose those services to the public as an OpenAPI scheme. For web application such services consumed via http, for desktop/mobile app such services consumed via js interop (not localhost). During development the codegen uses API scheme to generate such services in JS/TS. All communication including native support happens via the API services (communication between frontend and backend using services).
Example:

• Barcode scan. Frontend (js) calls a backend service (v) to get a barcode tag. The backend service opens a native ui window (over the webview) to scan the image. The scanned tag goes back to the frontend as a result of the service call. You can also open a data stream between backend and frontend to show the live cam picture in the actual webview instead of the native window if you want.

Another simple example of the implementation:
entities\article.v

struct Article {
	id    int    [primary; sql: serial]
	title string
	text  string
}

models\article.v

struct IdModel {
	id    int [required]
}

struct ArticleModel {
	id    int
	title string
	text  string
}

struct CreateArticleModel {
	title string [required; maxlength: 50]
	text  string
}

struct UpdateArticleModel { ... }

struct PublishArticleModel { ... }

...

services\article_service.v

[api]
struct ArticleService {
        db DbService // Injected service or repository
}

[api]
pub fn (article_service &ArticleService) get(query IdModel) ArticleModel {

	result = sql article_service.db {
		select from Article where id = $query.id
	}

        return result.map<ArticleModel>()
}

[api]
pub fn (article_service &ArticleService) create(form CreateArticleModel ) IdModel {

        form.validate_or_throw() or { ValidationError };

	result = sql article_service.db {
		insert into Article (id, title, text) set ($form.id, $form.title, $form.text)
	} or { DbError }

        return IdModel { result }
}

codegen generates the following js/ts (based on open api scheme, eg. https://github.com/Manweill/swagger-axios-codegen):
services.ts

export class IdModel {
  'id'?: number;

  constructor(data: undefined | any = {}) {
    this['id'] = data['id'];
  }

  public static validationModel = { id: { required: true } };
}

.. all other models

export class ArticleService {

  static get(params: { body?: IdModel;  } = {} as any, options: IRequestOptions = {}): Promise<ArticleModel> {
    return new Promise((resolve, reject) => {

      let url = basePath + '/ArticleService/Get';

      const configs: IRequestConfig = getConfigs('post', 'application/json', url, options);

      let data = params.body;
      configs.data = data;

      if (web) {
            axios(configs, resolve, reject);
      } else if (mobile) {
           js_interop(configs, resolve, reject);
      } else {
          throw Error("platform not supported");
      }
    });
  }

... etc other services

}

Example of js interop in .NET: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/

I am aware of the following cons:

• Increased memory usage
• Extra communication backend <-> frontend
• WebView limitations and security issues
• Performance

So what is actually required is a WebView, and the ability to communicate between the WebView and the backend (in this case mui). Nothing else. It is easy as that.

[malisipi]

I can try to create WebView window with webview/webview. This library has good cross-platform support, uses system-webviews but it requires C++11 minimum (and C++17 for Windows). If I can make working the library with V (without very complicated compile steps), I will add a WebView window into mui for only desktop platforms (for now).

[malisipi]

I got working webviews on Linux and Windows. That's not have API except C functions that provided by webview library for now, however i will write V-compatible functions (also that could be include functions not provided from C library like resize or move, but that is not first goal). You can follow updates from WebView branch.
Screenshot from WebView Example:
Linux (Ubuntu):

Windows:

[fairking]

Cool. Thank you. 👍

As I can see there are two features required (if not already there) as a minimum to get hybrid app working:

1. Local assets (js, css, images) consumed by WebView, something like wwwroot
2. V <-> JS communication (v.call_js({ json } and js.call_v({ json }))

I will test it this week.

[malisipi]

After latest commit at webview branch

Local assets (js, css, images) consumed by WebView, something like wwwroot

You can load html files with load_html_file function.
Limitations:

• It uses file protocol instead of localhost. It could make harder developing applications because of CORS and/or other policies.
• If you use / inside path, that will refer to / (C:/ for Windows). And your assets will not load. You can use ./ inside all paths to solve it.

V <-> JS communication (v.call_js({ json } and js.call_v({ json }))

• You can run JavaScript code inside webview, but if you want to get result of code, you must to bind a function into webview (ex. my_return) and run the code (ex. webview.eval("my_return(2+4);"))
• You can not call V function directly from JavaScript (that needed by security reasons). But you can bind V function as JavaScript function (ex. important_v_fn) and you can call them from JavaScript code. (ex. important_v_fn("Param1","Param2").then(console.log))

You can browse example code at webview branch.

[fairking]

👍 I am going to test it now.

You can not call V function directly from JavaScript (that needed by security reasons).

Every hybrid app has such ability. It is not like js can eval any v code in the backend. It is just some kind of a channel to get/post information from/to the backend, same as it was a http request. Eg.:

in v:

app_data.webview.register_handler('my_handler', handler) // registers a `my_handler` method in webview

fn handler(message string) ?string {
    request := deserialize<ServiceRequest>(message)
    mut result = ''
    if request.route.starts_with('/Articles') {
        srv := ArticleService{ db }
        if request.route.starts_with('/Articles/Get') {
           params := deserialize<GetArticleQuery>(request.body)
           result = serialize<ArticleModel>(srv.get(params)?) or { error('could not execute service $data.route') }
        } else {
            error('could not find route $data.route')
        }
    } else {
        error('could not find route $data.route')
    }
    return result
}

// somewhere in my code

struct ServiceRequest {
pub:
    route string
    body string
}

module articles

struct GetArticleQuery {
pub:
    id int
}

struct ArticleModel {
pub:
    id int
    title string
    text string
}

struct ArticleService {
    db DatabaseService
}

pub fn (a ArticleService) get(q GetArticleQuery) ArticleModel {
    return a.db.query<ArticleModel>(select * from articles where id = $q.id)
}

and then js:

<script>
  function load_article(article_id) {
      call_v("my_handler", "{ route: '/Articles/Get', body: { id: article_id } }") // returns Promise
          .then(result => {
              article_page.form = result.data;
          }).catch(error => {
             alert("Error: " + error);
          });
  }
</script>

Same approach with Scan Barcode example. You can even build a file explorer in this way.

You can look at this as an example: https://tauri.app/v1/guides/features/command

[fairking]

It uses file protocol instead of localhost

👍
yes, no localhost, it will be over-complicated and not native.

If you use / inside path, that will refer to / (C:/ for Windows).

I guess the base path can be used. Or as an alternative some protocol mui://my_script.js pointing to the www root folder required.

[malisipi]

I made a basic Articles example. This is not use any db or anything but it's good to explain V-JavaScript inter-op. Also this example written by vanilla JavaScript but could be used Vue.JS or another JavaScript library to make the application more powerful.

You can browse the code.

[fairking]

You can browse the code.

I tried to to run the webview example but I am getting an error "cannot import module "malisipi.mui.webview" (not found)"
Do you know how to solve it?

btw, before I have run: v install https://github.com/malisipi/mui.

[malisipi]

Do you know how to solve it?

v installs default branch so you must install yourself,
cd ~/.vmodules/malisipi
rm -rdf mui
git clone https://github.com/malisipi/mui --branch webview
Also you must need to compile webview.o before use module.
So open terminal in ~/.vmodules/malisipi/mui/webview and run build_webview_for_<your_os>

PS: Also if you use Windows, compiling example is could be too challenging.
You need a few h file from W10 SDK. But you can not find/download without downloading entire SDK from Microsoft.
You must to set set W10_SDK=/path/to/sdk before compiling webview.o.
Also you need to have gcc to compile. TCC won't compile the library causes error that i can not understand why. So you need to gcc. For using gcc, v -cc gcc ...

[fairking]

Maybe I have missed something, but I got the following error:

C:\Code\mui\examples\webview\webview_example>v -cc gcc run webview_example.v
C:\Users\Admin\.vmodules\malisipi\mui\webview\webview.obj not found, building it (with msvc)...
builder error: MSVC cannot link against a dll (`#flag -l WebView2Loader.dll`)

C:\Code\mui\examples\webview\webview_example>

this is how I built the webview (copied from my terminal):

C:\Users\Admin\.vmodules\malisipi\mui\webview>set W10_SDK=C:\Program Files (x86)\Windows Kits\10\Include\10.0.22000.0

C:\Users\Admin\.vmodules\malisipi\mui\webview>PATH %PATH%;C:\mingw64\bin

C:\Users\Admin\.vmodules\malisipi\mui\webview>build_webview_for_windows

C:\Users\Admin\.vmodules\malisipi\mui\webview>g++ -c C:\Users\Admin/.vmodules/malisipi/mui/webview/webview/webview.cc -lstdc++ -shared -static -std=c++17 -I C:\Users\Admin/.vmodules/malisipi/mui/webview/webview2/build/native/include -I "C:\Program Files (x86)\Windows Kits\10\Include\10.0.22000.0/winrt/" -lWebView2Loader.dll -lole32 -lshell32 -lshlwapi -luser32 -o C:\Users\Admin/.vmodules/malisipi/mui/webview/webview.o

C:\Users\Admin\.vmodules\malisipi\mui\webview>

[malisipi]

Looks like webview.o created correctly.
But i guess v can not found gcc and so tried to use msvc, and failed. Did you add gcc to path before compiling v-example.
If that not works, please send v -showcc -cc gcc ... output. This output have infos like which compiler used or which flags used while compiling.
Also, if you see a error like that while running application. Code execution cannot continue because WebView2Loader.dll was not found. Reinstalling the program may fix this problem.. This is normal, you must copy ~/.vmodules/webview/webview2/runtimes/win-<your_arch>/native/WebView2Loader.dll into your app directory.

[fairking]

These what I have:

C:\Code\mui\examples\webview>gcc
'gcc' is not recognized as an internal or external command,
operable program or batch file.

C:\Code\mui\examples\webview>set W10_SDK=C:\Program Files (x86)\Windows Kits\10\Include\10.0.22000.0

C:\Code\mui\examples\webview>PATH %PATH%;C:\mingw64\bin

C:\Code\mui\examples\webview>gcc
gcc: fatal error: no input files
compilation terminated.

C:\Code\mui\examples\webview>v -showcc -cc gcc run webview_example.v
v expects that `webview_example.v` exists, but it does not

C:\Code\mui\examples\webview>cd webview_example

C:\Code\mui\examples\webview\webview_example>v -showcc -cc gcc run webview_example.v
> C compiler cmd: "gcc" "@C:\Users\Admin\AppData\Local\Temp\v_0\webview_example.9499648542930297532.tmp.c.rsp"
> C compiler response file "C:\Users\Admin\AppData\Local\Temp\v_0\webview_example.9499648542930297532.tmp.c.rsp":
  -std=c99 -D_DEFAULT_SOURCE "C:\\Users\\Admin\\.vmodules\\cache\\28\\281ce86301abbcad64e66a688c6fcec7.module.builtin.o" "C:\\Users\\Admin\\.vmodules\\cache\\7e\\7e3c4e2c5f7170f871dbb70ff5415fae.module.json.o" "C:\\Users\\Admin\\.vmodules\\cache\\9d\\9d6a7c3263b5e61122c2cef48f3047cb.module.stbi.o" "C:\\Users\\Admin\\.vmodules\\cache\\2a\\2a1e94ac4ac24b07238d4d186bdbed9b.module.malisipi.mui.webview.o" -o "C:\\Code\\mui\\examples\\webview\\webview_example\\webview_example.exe" -Wl,-stack=16777216 -Werror=implicit-function-declaration -D GC_NOT_DLL=1 -D GC_WIN32_THREADS=1 -D GC_BUILTIN_ATOMIC=1 -D GC_THREADS=1 -D SOKOL_GLCORE33 -D SOKOL_NO_ENTRY -D SOKOL_WIN32_FORCE_MAIN -I "C:\\Code\\v\\thirdparty\\libgc\\include" -I "C:\\Code\\v\\thirdparty\\cJSON" -I "C:\\Code\\v\\thirdparty\\stb_image" -I "C:\\Code\\v\\thirdparty\\fontstash" -I "C:\\Code\\v\\thirdparty\\sokol" -I "C:\\Code\\v\\thirdparty\\sokol\\util" -L "C:\\Users\\Admin\\.vmodules\\malisipi\\mui\\webview\\webview2\\build\\native\\x64" -I "C:\\Users\\Admin\\.vmodules\\malisipi\\mui\\webview\\webview2\\build\\native\\include" -static -I "C:\\Code\\mui\\examples\\webview\\webview_example\\webview\\" -I "C:\\Code\\v\\thirdparty\\vschannel" C:\\Users\\Admin\\.vmodules\\malisipi\\mui/tinyfiledialogs/tinyfiledialogs.c "C:\\Users\\Admin\\AppData\\Local\\Temp\\v_0\\webview_example.9499648542930297532.tmp.c" -municode -ldbghelp -lgdi32 -ladvapi32 -lWebView2Loader.dll -lole32 -lshell32 -lshlwapi -luser32 -lstdc++ -lgdi32 -lws2_32 -lcrypt32 -lsecur32 -luser32 -lurlmon -lcomdlg32

C:\Code\mui\examples\webview\webview_example>v -cc gcc run webview_example.v

C:\Code\mui\examples\webview\webview_example>

On executing the v -showcc -cc gcc run webview_example.v or v -cc gcc run webview_example.v nothing happens. No window appears. Should I need to do anything else?

But these time that error disappeared.