Giter Site home page Giter Site logo

hypersamples's Introduction

HyperSamples

A working website that includes Hyperapp v2, Typescript, and Parcel. Also demonstrates accessing an HTTP API.

This project uses a fork of Hyperway to manage client-side routes and Hyperlit to improve HTML legibility.

What is this project about?

If you're evaluating a new front-end framework and came across Hyperapp, this project can help you with the first steps. Explore the source code and the workflow below.

Usage

Install dependencies, including Typescript and Parcel:

yarn install

To run the local parcel application server (it opens your default browser with auto-reload enabled):

yarn start

Pro tip: Change the localhost in the URL of the browser to your local network IP Address and share the URL with your mobile device for quickly see how your changes look on mobile.

To build the application:

yarn build

To check for compilation issues:

yarn check

To serve the compiled version of the application (remember to build it first):

yarn serve

When you serve the built version, you can share the URL with other devices in the same network (useful to test on your phone).

To run unit tests (not implemented yet):

yarn test

FAQ

Why some views use h (from Hyperapp) and others use html (from Hyperlit)?

This is by design. This project explores Two ways to render views. There's also possible to use JSX/TSX or other view engines.

Why does this project use Bulma (CSS)?

The only reason is to showcase how a 3rd party CSS framework can be easily added to your project if you decide to do so.

Does the state load from the Local Storage?

Yes, partially. Why? To demonstrate how you can adopt this technique in your application if you decide to do so. You can choose to do not use Local Storage at all to store the application's state, even though it's useful in some cases.

Typescript

Nothing about Hyperapp depends on Typescript. I included it because I like to use it with my own data structures. Hyperapp does not currently provide Typescript type definitions, and the hyperapp.d.ts file in this project was copied (and modified) from the PR #969.

License

MIT

Resources

https://httpstat.us/200

hypersamples's People

Contributors

hlibco avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

tahins

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.