Examples should be brought up to date and made prettier

[ZainlessBrombie]

Is your feature request related to a problem? Please describe.
The features currently don't look very pleasing and e.g. the webgl one didn't compile. It might be a good idea to bring them up to date / do a new set of examples.

Describe the solution you'd like
Someone (could be me) should redo the examples with proper css styling and bring them up to date

Describe alternatives you've considered
We could keep them looking the way they do right now for simplicities sake, but I think some styling won't hurt. We need to represent ourselves after all :)

Additional context
A) I'd redo the examples but while I'm full stack design is not one of my primary skills. Might need some pointers from someone regarding the design after the initial draft.
B) Here is a simple little styled component class I wrote. Mind if I use it for styling in the examples?
https://pastebin.com/j2qtsmTm
C) Do we still need to support std_web for the examples? It would be simpler to just go with web_sys imho, after all std_web has seen no activity in the past months and web_sys is more official

[ZainlessBrombie]

I could also improve the performance of the style class I provided :)
Or use https://docs.rs/styled-yew/0.2.0/styled_yew/, of course

[jstarry]

I'd redo the examples but while I'm full stack design is not one of my primary skills. Might need some pointers from someone regarding the design after the initial draft.

I'd prefer if they used an existing theme or library. One of these would be nice:

• https://materializecss.com/
• https://getbootstrap.com/

Here is a simple little styled component class I wrote

Nice!

Mind if I use it for styling in the examples?

I would prefer to keep the code very simple for the examples. It's more important that they are quick to understand and play with than look nice. I think that we could it for one of the examples, though.

Do we still need to support std_web for the examples? It would be simpler to just go with web_sys imho, after all std_web has seen no activity in the past months and web_sys is more official

So long as:

• Yew maintains support for stdweb
• stdweb isn't officially dead
• people still want to use cargo-web

we should keep examples that support stdweb That said, I don't think that new examples need to support both.

[jstarry]

the webgl one didn't compile

This one was just added, do you mind creating an issue for this?

[ZainlessBrombie]

https://yew-ex-v1.single-page.zainlessbackend.com/
Example of how the examples would look. Code at https://github.com/ZainlessBrombie/yew-examples-redone
Ripping plenty from the existing examples ^^

[jstarry]

Love the UI update!! <3 <3

[ZainlessBrombie]

Lovely, thanks! 😊

[ZainlessBrombie]

For the todomvc one I'm getting an error
Uncaught SyntaxError: Cannot use 'import.meta' outside a module

Online are:
https://crm.examples.yew.rs
https://custom_components.examples.yew.rs
https://dashboard.examples.yew.rs
https://fragments.examples.yew.rs
https://game_of_life.examples.yew.rs
https://large_table.examples.yew.rs
https://nested_list.examples.yew.rs
https://pub_sub_2.examples.yew.rs
https://textarea.examples.yew.rs
https://timer.examples.yew.rs
https://webgl.examples.yew.rs

[ZainlessBrombie]

https://crm2.examples.yew.rs
New crm example

[ZainlessBrombie]

https://fragments2.examples.yew.rs
New fragments example

[ZainlessBrombie]

https://futures2.examples.yew.rs
This one is fresh from the web_sys documentation, not from the old example ;)
It uses the wasm_bindgen_futures crate

[ZainlessBrombie]

Alright on the todo-list are:

• A Websocket global chatroom (I'd use my personal server as the host)
• A multithreading demonstration
• A demonstration of mount points / having two apps in parallel
• A node_refs demonstration
• A file upload example (maybe one that displays the contents of the uploaded zip file?)
• A js callback demonstration
• A super large table demonstration
• A fetch / web request demonstration
• A yew router demo
• A hooks API demo
  Am I missing anything?

[ZainlessBrombie]

Also, I'll look into building some adapter for react-like functional components and redux store :)

[ZainlessBrombie]

I can do this now 🎉 🎉

[jstarry]

Awesome! Can you create a new issue for that and describe the API?

[ZainlessBrombie]

Huh multithreading is not working at all. It can't find the files needed to work the worker, seems the project has to be set up in a very specific way for that. Wonder how we can fix that

[jstarry]

The web-sys multithread example? There is a readme for that, it's an unusual setup

[jstarry]

@ZainlessBrombie where did you leave off with example updates? I think we could leverage some community component libraries to help with this effort

[ZainlessBrombie]

I honestly did not continue after updating this and focused on the hooks API. I have not forgotten about it though, I'm just pretty booked right now :)
Current State: https://yew-ex-v2.single-page.zainlessbackend.com/
(Last one should be triggered on a button press so its clear what it does)

[jstarry]

@ZainlessBrombie no worries! take your time :)

[p-alik]

For the todomvc one I'm getting an error
Uncaught SyntaxError: Cannot use 'import.meta' outside a module

I run in the issue also. What causes the issue and how it could be solved?

[teymour-aldridge]

My suspicion is that is an error caused by rules around how ES5 (a Javascript specification – not sure if it's ES5 of ES6) defined Javascript modules. I'd suggest making sure the relevant <script> tags have type "module" i.e. <script type="module"> and checking if that makes a difference?

[p-alik]

The exception disappears if this line

yew/examples/todomvc/static/index.html

Line 10 in 1e609b4

<script src="/todomvc.js"></script>

is modified as suggested. But in this case my browsers (Firefox 75.0, Chromium 81.0.4044.113) show an empty page.

[siku2]

I think this has been achieved to a reasonable degree (there will always be things to improve) so I'm going to close this now.

[NickLarsenNZ]

This should be moved to Done in the relevant projects