Build the GUI with proton react-nativ

Create native desktop application through a react-native platform

background

Build the desktop applicaiton based on the node.js platform have some library we can use, the electron is the pioneer and Atom and Visual Studio Code are the good example, but the electron based application is not friendly for the mini-apps, and react-native is the good choice for the universal application interface for the web, mobile and DESKTOP.

Proton-Native is the library to build the desktop application based on the react-native library and libui, can build the same GUI application to support the Windows, Linux and OSX, same code logic, same development lifecyle and deployment to different user inferface platform.

Get started

proton-native document
proton-native github
proton-native example

build system pre-requist

you need nodejs version 8 or newer
and the build system for the os
windows depends on the visual studio
linux need libgtk-3 build-essential
OSX need xcode-cli

react-native cli

npm install -g create-proton-app
create-proton-app my-app
cd my-app && npm run-start

modify the index.js to customize your app

package

depends on the electron-builder, we can package the app on the Linux and OSX, windows is not supported now.

to build the app: npm build
to builde the app: npm run dist

manually prepare the app development

. development bundler tools babel babel-cli babel-prepset-env babel-preset-react babel-preset-stage-0

create the .babelrc:
{
“presets”: [
“env”,
“statge-0”,
“react”
]
}

add the following script in the package.json

“start”: “babel-node index.js”

and then run the app with npm start

example of Hello-Proton

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//index.js
import React, { Component } from 'react'
import {
    render, App, Window
} from 'proton-native'

class Hello {
    render() {
        return (
            <App>
                <Window title='Hello Proton' 
                    size={{{w: 400, h: 300}
                />
            <App>
        )
    }
}
render(<Hello />)

springboot-practice-01

Getting startted with spring boot

spring boot simplified the springframework and help us to focus on the development, not the configuration and the depenpendices.
with the release of the spring-boot 2.0, it support the modern language kotlin, I will take the note the develop the simple micro service based timesheet application based on the 12factors design pattern and implmented in springframework.

timesheet application

in the software project, every engineer need record his work based on the time and work, timesheet applicaiton help the developer to input his work to the central timesheet database and the project manager can view the effort of the every member to be charged in his project.

monolithic application approach

in the traditional architecture design approach, we seperate the application domain to 3 differenet tiers and use the MVC design pattern to architect the application, with more than 10 years, J2EE and SSH framework is the main stream of the applicaiton development in the enterprise application architecture.
In this approach, the UI is build by JSP or some template engine, the business domain was moduled by the EJB or POJO with JPA to the backend, all the business logic was implemented in the same deploy module and maintained by the same dev team.

challendge of the monlithic application

Transactional and stateful design pattern make the application is hard to scale out to support growing bussiness demand, and the availability and fault tolerent is also the shortcomming for this architecture, migrate the the cloud and adopt the modernized application architecture is hard to re-engineering this type of application.
And also fro the bussiness requriements aspect, we can not quickly add the feature to the existing application, the AOP can help this type of application, but modify the code and adopt the new feature to the existing model need extral effort the do the unit test and integration test, need redeploy the code the production enviornment which will stop the current transaction in the production environment.

And the DevOps adoption also is the big challenge for this approach, the dev and ops team must define the clear test and deployment process, testing and delpoyment will take longer time to complete, agile development is the myth.

mciro service

Moving to the micro service.

“In short, micro service architecture style is an approach to developing a single application as a suite of small service, each running in its own process and communicate with lightweight mechanism, offer an HTTP API to represent its resources.These services are built around business capabilities and independently deployable by fully automated deployment machinery. There is a bare minimum of centralized management of these services, which may be written in different programming languages and use different data storage technologies.”
– James Lewis and Martin Fowler

micro service of timesheet

we design the timesheet service to 3 different domain(for simplified version), employee service for the engeer details and wbs code for the charge code and time record for the timesheet record.

All the services follow the micro service pattern:
– single reponsibility, around the business
– share nothing, stateless
– independent deploy

advantage of the microservice

Parrelle development model

With the implementation of the 3 different service model for the time sheet application, we can split the applicaiton to 3 different model to proritized the business module and parrelle develop the application.

focus on the business domain

with the simplifed business domain, we can focus the business domain requirement and utility the agile development methodology to quick implement the prototype and add the feature with 2-4 release cycle, more agile to support the business demands and quick delpoy to production environment.

high performance development team

with this model, only 4-6 person in one development team to communicate with each others effiently and effectively.

service oriented design applied

Loosely decouple, focus the internal architect and extensibility was the key success factor of the soa design pattern.

language and tools neutral

every team will use their tools and platform to develop and host their service, the devops model also is applied effieciently to this model.

in the next module, we will discuss the microservice design method, the DDD and BDD related topic.

learning the plain javascript

learning the plain javascript

Learning the javascript is not the easy thing, you first may start from the plain javascript, not rely on the framework or library, it is helpful to let you understand the technology used in the framework.

Javascript will be many years, but libraris and framework will come and go every years.

Where to start?

Start with HTML5

Eere is the book good for you Head first HTML5 Programming
It’s just begining book on the web page authoring and programming, cover the most impartant features of the HTML5, markup language, DOM, CSS and Javascript and websocket etc.

Work on the Free Code Camp

Free Code Camp is the good place to start the learning, not only the javascript，but also other good stuff you will be interested.

Avoid the shortcuts

When you resolving the problem, it is eary to search the solution on the internet, and find someone can help you, but this is not helpful for you to improve your programming skills.
Just be honest to youself and work hard to find the right way to make it resolved.

next step

Github is the good place to share the code and learn the code from others, signup and watch some useful resource, awesome javascript and awesome xxx is the good start point.

welcome

welcome

Welcome to Eric Hao’s blog
you may reach me hhao99#gmail

With more than 40 years experience, my adventure continue on the wide technology area, AI and IoT is the emerging to our life.

github
linkedin