How to Build a TodoMVC App from scratch in VanillaJS (tutorial/example)

[nelsonic]

Greetings TasteJS Creators! 👋

Love the work you have done with TodoMVC to help people with comparing JS frameworks! ❤️

I felt there was a "gap" in the ecosystem around teaching complete beginners how to build a TodoMVC App from scratch following TDD using VanillaJS so I wrote the example/tutorial:

https://github.com/dwyl/todomvc-vanilla-javascript-elm-architecture-example

I consider it a "non-framework implementation" worthy of inclusion in the list. The use of the Elm Architecture (pattern) is simply to organise the code and "rendering flow", no framework is used and all code is clearly commented.

If you agree that the example is worth of inclusion, please leave a comment, I'd be delighted to create a Pull Request following the contributing.md guide.

The code is already pretty readable: https://github.com/dwyl/todomvc-vanilla-javascript-elm-architecture-example/blob/master/lib/todo-app.js But I'm happy to re-format to code style guide if it will help with consistency/readability.

Look forward to hearing your thoughts! Thank you! ✨

[gj262]

Hi Nelson,

This is "beyond" fabulous! It does a great and thorough job of detailing a TDD approach to bringing a new TodoMVC implementation to life!

I think it should be included both for the complete beginner help and as a detailed description of the TodoMVC specification.

I helped out with some test bugs earlier in TodoMVC however I do not have write permission to this repo, maybe @FadySamirSadek can weigh in and give the go ahead to work on a PR.

Cheers, -Gavin

On Thu, Nov 1, 2018 at 4:46 AM Nelson notifications@github.com wrote:

Greetings TasteJS Creators! 👋

Love the work you have done with TodoMVC to help people with comparing JS frameworks! ❤️

I felt there was a "gap" in the ecosystem around teaching complete beginners how to build a TodoMVC App from scratch following TDD using VanillaJS so I wrote the example/tutorial:

https://github.com/dwyl/*todomvc-vanilla-javascript*-elm-architecture- example https://github.com/dwyl/todomvc-vanilla-javascript-elm-architecture-example

I consider it a "non-framework implementation" worthy of inclusion in the list. The use of the Elm Architecture (pattern) is simply to organise the code and "rendering flow", no framework is used and all code is clearly commented.

If you agree that the example is worth of inclusion, please leave a comment, I'd be delighted to create a Pull Request following the contributing.md https://github.com/tastejs/todomvc/blob/master/contributing.md guide.

The code is already pretty readable: https://github.com/dwyl/todomvc-vanilla-javascript-elm-architecture-example/blob/master/lib/todo-app.js But I'm happy to re-format to code style guide https://github.com/tastejs/todomvc/blob/master/codestyle.md if it will help with consistency/readability.

Look forward to hearing your thoughts! Thank you! ✨

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/tastejs/todomvc/issues/1950, or mute the thread https://github.com/notifications/unsubscribe-auth/AGiXHHv7afkAoR9bQiKXB4mT3fuKMYNAks5uqt8cgaJpZM4YGQQv .

[FadySamirSadek]

@gj262 Thank you so much for your input. @nelsonic Please open a PR this is great work 👏. I will also work with you to help integrate it to TodoMVC as I think we have a big room for improvement in the Beginner tutorial section which I think is extremely important. Thanks a lot for your desire to contribute to the TodoMVC project

[nelsonic]

@FadySamirSadek thanks for your feedback. Please advise what section to open the PR. Should it be as example? Should I include all the instructions in the README.md (it's 58 pages when printed as a PDF...) or should I simply link to the tutorial https://github.com/dwyl/todomvc-vanilla-javascript-example I don't mind either way, I just want to get this to the people who can use it to learn. 👍