Hyperapp: Provide a list of example apps to help build community

[rajaraodv]

I created a list of examples that I'd love to see built by us (I'm happy to contribute). All these are taken from the React ecosystem. We can use this list as a guidelines and top-level things that the community will need to come onboard and be successful. Note: We may already have some ready to be used.

In JS, we can solve everything 100s of ways. I'm looking to provide a set of "prescribed" ways of doing things (both for small and large apps) - even if it comes with some caveats.

---

Examples from React To Be Ported To Hyperapp

The purpose of this is to have links to examples that shows Hyperapp's core concepts, organizing large projects, dealing with 3rd party libraries and so on.

All the examples should try to have:

1. Have a testable UI (i.e. not just concepts)
2. Have Comments/documentation
3. Closer and similar to "Elm" architecture than "React" architecture.
   
   
   
   1. Use Functional programming tehniques
   
   
   2. Use Functional libraries like Ramda (if needed)
   
   
   3. Use Flow (if possible) for type checking.
   
   
   4. Use "MayBe" or Null checks to avoid all run-time errors.
   
   

Explain Concepts

1. React Tutorial - https://facebook.github.io/react/tutorial/tutorial.html (final app: https://codepen.io/gaearon/pen/gWWZgR?editors=0010)

   1. What is Model-View-Update
   2. States and Lifecycle - https://facebook.github.io/react/docs/state-and-lifecycle.html
   3. Passing data through "props"
   4. Handling Actions
   5. Handling DOM events
   6. React's classes vs Hyperapp's functions
   7. Conditional Rendering https://facebook.github.io/react/docs/conditional-rendering.html
   8. Immutablilty https://facebook.github.io/react/tutorial/tutorial.html#why-immutability-is-important
   9. Keys in lists - https://facebook.github.io/react/tutorial/tutorial.html#keys

2. Forms https://facebook.github.io/react/docs/forms.html

3. "Refs" and DOM equivalent https://facebook.github.io/react/docs/refs-and-the-dom.html
4. "Composition vs inheritance" - https://facebook.github.io/react/docs/composition-vs-inheritance.html
5. "Higher-order components" https://facebook.github.io/react/docs/higher-order-components.html
6. "Reconciliation" equivalent in HyperApp https://facebook.github.io/react/docs/reconciliation.html
7. Testing - Jest?
8. Namespace resolution
9. Mixins - Why and How

Styling

1. Examples that shows how to style components
2. How to use various CSS libraries like "Styled components".

Explain How To Organize Code And Build Realistic Apps

1. Provide a large app and uses 3rd party libraries, Has authentication routes, has at least 10 different components.
   
   
   
   1. For example: Shopify clone that uses shopping cart, user authentication, products list, products details, emails, change password etc.
   
   
2. https://wrapbootstrap.com/theme/ant-reactjs-admin-web-app-WB034D136

Build Fun Apps:

1. Tetris With States - https://github.com/skidding/flatris (currently in React)
2. Gopherize me - https://gopherize.me/ (Go language)
3. Emoji Search - https://github.com/ahfarmer/emoji-search (currently in React)
4. Product comparison - https://github.com/Rhymond/product-compare-react
5. Todo Example
6. HackerNews Clone

Integrating 3rd party apps

https://facebook.github.io/react/docs/integrating-with-other-libraries.html

1. Integrating With jQuery plugin - https://facebook.github.io/react/docs/integrating-with-other-libraries.html#integrating-with-jquery-chosen-plugin
2. Google Analytics in React - https://github.com/react-ga/react-ga
3. Stripe Checkout in React - https://github.com/azmenak/react-stripe-checkout
4. D3 in React https://github.com/emeeks/d3_in_action_2/tree/master/chapter9/reactd3 (D3 in React) Blog link: https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71

Hyperapp Reusable components

1. Create a partial list of awesome-react-components: https://github.com/brillout/awesome-react-components
2. React-Bootstrap https://react-bootstrap.github.io/

---

[Source]

[okwolf]

@rajaraodv thanks for getting the ball rolling on this! Other sources of inspiration we could look to are the Elm examples and Vue.js examples.

[jorgebucaran]

@rajaraodv Maybe we can turn this into a checklist, otherwise it may stay open forever. 😅

EDIT: I updated your post to include all the examples you came up with. Thanks! 👋

[1zaak]

+1 for Graphql example

[webeli]

I found the examples over at next.js very helpful when i started out. I feel alot of times i don't need to see the result of it, just some example code of how to get started with different implementations.

[okwolf]

We have hyperapp/awesome for cataloging example apps already built with Hyperapp. What I think we need is a list of example apps not yet built but that we would _like_ to see built with Hyperapp. Maybe even come up with some non-monetary bounty incentive. 🤔

[jorgebucaran]

Free Hyperapp stickers and random Japanese gift.

[ismamz]

Hi @JorgeBucaran! I have seen that you are working on improving the documentation. I have also seen that you have created a awesome list and you have examples in Codepen that are not linked in that list. I have created two examples that I saw in this thread and were not created yet: Markdown Editor (nice example of dangerouslySetInnerHTML) and Emoji Search.

I would like to be able to add these examples to the documentation, but I am not clear about the guidelines to do it. Would it be nice to add them in a list of examples in hyperapp / awesome? Or maybe on Tutorials section?

[jorgebucaran]

@ismamz Let's add them to hyperapp/awesome, can you create a PR there?

To add the examples to the tutorials section, perhaps start with one, write the tutorial, create the PR and we'll review it. Sounds good? 😄

[ismamz]

Perfect! I've added examples to the awesome list.
I could start writing a tutorial, if you find it useful.

[jorgebucaran]

@ismamz Rather than another tutorial, I'd like to add documentation for currently undocumented concepts like slices, modules, etc. So, IMO a more useful contribution would be to write an original tutorial and publish it on your blog, gist, GitHub, etc.

What do you think? :)

[ismamz]

I think it's a good idea!

[mrozbarry]

This looks like the problem that LearnHyperapp wants to solve. You can DM me on the hyperapp slack channel for org access :)

[zaceno]

Here's a (quite simple) example app written with Hyperapp https://github.com/zaceno/happy

Live Example: https://zaceno.github.io/happy/

[zaceno]

Oh and since someone mentioned Tetris, here's a start if someone wants to finish it (needs scoring, levels, main menu, prettiness...)
https://codepen.io/zaceno/pen/JreKPN?editors=0010

[jorgebucaran]

Idea: Helmet for Hyperapp

• https://github.com/hyperapp/hyperapp/issues/593

[jorgebucaran]

Let's see what we have accomplished so far.

We have better documentation.

We have a CodePen with basic examples. New examples coming soon! 💥

We have a Medium Publication: Hyperapp Vox Populi (Want to write for us? Write an article and have me or @okwolf review it for publication. Feel free to reach me on Twitter @JorgeBucaran, my DM is open!).

There is also LearnHyperapp by @mrozbarry, if you want to join Alex in that adventure, all you need is ask him to add you as a collaborator of that organization.

There is also @Zaceno's Hypercraft Blog of rants, tricks and pitfalls. Check it out!

We are also on Twitter, follow @HyperappJS for news and announcements. If you make something cool with Hyperapp and want exposure, @mention us. You can also share it on Reddit's /r/Hyperapp or submit it to hyperapp/Awesome on GitHub.

---