Giter Club home page Giter Club logo

ionicbaseplate's Introduction

Baseplate

[ a boilerplate code for ionic + react ]

Documentation:

Scaffold your project using Ionic Framework + React.js + Redux.js (+ immer.js + Redux-Saga + Re-Select) fully written in typescript

Enjoy building complex Ionic + React based apps.

PRs Welcome Open Source Love

Baseplate features

  • Well suited for PWA, Apache Cordova or Electron based applications.

  • Out of the box lazy-loading components and pages.

  • Tightly coupled with Typescript system.

enter image description here

  • Generator for page and component

enter image description here

Usage:

Clone the repository and run below command on the root of your project.

npm i

ionic serve

CLi for page & component generation

For page: npm run gen-page TestPage

For Component: npm run gen-comp TestComponent

Implementation details:

File \ Folder Details
src\pages\SimplePage Reference implementation for a page that is followed throughout boiler plate code (built on container concept)
src\pages\SimplePage\constants.ts Contains both action names and constants used within a Page \ Container
src\components Contains all the elements and components to be used in Page \ Container.
src\basplate Contains all the project related wiring and also application level configurations.
src\shared-base Refer readme.md inside shared-base folder

Options

Options \ Object Details
eProps Emiter props (differentiated from normal props), used to emit actions to the reducer or middleware from the container.
action object that carries the data in a component
reducer is implemented using immer.js, a draft based state manipulation.
SCSS (style.module.scss) module based for the classname hashing & namespace collision prevention.

Action Object - source

Options \ Object Type Description
type String Unique string for each page or container. It should be unique across the application.
payLoad String / Object Data payload carrier for component to middleware and vice versa
meta Function / String / Object Any data directly to be sent to middlewares and vice versa without putting to global store. ex: function callback

Repo inspired by

๐Ÿ”ฅ ReactBoilerplate

Suggestions 0r Comments

Please raise a PR or issue request for your valuable contributions and Suggestions

Roadmaps

  • Translation (i18n support) - Tweaks needed
  • Boilerplate code without Redux and Saga
  • Adding more options to generator
  • Support for React Native

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.