Beginning React JS

What Is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. React has a few different kinds of components, but we should start with React.Component subclasses

React components implement a render() method that takes input data and returns what to display. It uses an XML-like syntax called JSX but JSX is optional and not required to use React. There are two types of data that control a component: props and state.

Read More

Install and build your first React Native app

React Native lets you build mobile apps using only JavaScript. With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React. React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With Hot Reloading, you can even run new code while retaining your application state

Read More

Introduction to Cascading Style Sheets

Cascading Style Sheets or CSS is the basic technique to separate the appearance of a web page from the content represented in HTML. In this section, we give an introduction to CSS and look how they are relevant to software development with Vaadin.

As we can only give a short intruction in this book, we encourage you to refer to the rich literature on CSS and the many resources available in the web. You can find the authoratitative specifications of CSS standards from the W3C website and other literature, references, and tutorials from the Open Directory Project page on CSS, as well as from other sources .

Read More

Hello OSGi: Bundles for beginners & commands

OSGi = The Open Services Gateway Initiative defines an architecture for developing and deploying modular applications and libraries.

The Open Services Gateway Initiative (OSGi), also known as the Dynamic Module System for Java, defines an architecture for modular application development. OSGi container implementations such as Knopflerfish, Equinox, and Apache Felix allow you to break your application into multiple modules and thus more easily manage cross-dependencies between them.

Read More

What are five differences between React.js and React Native?

Reactjs is front end library developed by Facebook. It's used for handling view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries and it has strong foundation and large community behind it.

React Nativeis a mobile framework that compiles to native app components, allowing you to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use ReactJS to build your components, and implements ReactJS under the hood.

Read More

Spring Boot REST + Angular 2 + JPA + Hibernate + MySQL CRUD Example

We will create a REST web service application using Spring Boot and a client application using Angular 2. REST web service will expose methods for create, read, update and delete operation. The Angular application will use Angular Http API for CRUD operation. If our client application is running on different domain from web service domain, then the Spring Boot web service controller will configure client domain URL using @CrossOrigin annotation to handle Cross-Origin-Resource-Sharing (CORS). In our Spring Boot application, we will configure database using application.properties file. To interact with database we will use JPA EntityManager.

There are back-end application using spring-boot rest api and front-end application using Angular 2.

Read More

Connecting your Angular 2 App to your Java EE Backend

1-Introduction

You’ve been developing in Java EE all this time, but you’re tired of using JSF, or perhaps even Struts, and want to move to something more modern for your front end? Angular 2 is a perfect fit, and with the recent release of Angular 2 GA, now is the ideal time to make the move! Besides being easier to develop and maintain, an Angular 2 application allows you to take advantage of the huge improvements in browser technology over the last few years, and all the goodness that the modern web brings.

Broad Strokes

We will be working with two separate applications, a Java EE back-end app, and an Angular 2 front-end app, avoiding a mixing of concerns in a single project. Source for both projects is provided, so in this article we display and highlight source only for key concepts – you can download the projects to look at more detail, or run them locally.

Key technologies:

• JPA: Our sample Java EE application uses JPA to access data from a database.
• REST: We expose the table data via REST web services using Jersey – the reference implementation for the JAX-RS spec.
• RxJS: Our Angular 2 app uses RxJS to communicate with the web services.
  

Read More

HTML attribute vs. DOM property in Angular

1-HTML attribute vs. DOM property

The distinction between an HTML attribute and a DOM property is crucial to understanding how Angular binding works.
Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).

• A few HTML attributes have 1:1 mapping to properties. id is one example.
  
• Some HTML attributes don't have corresponding properties. colspan is one example.
  
• Some DOM properties don't have corresponding attributes. textContent is one example.
  
• Many HTML attributes appear to map to properties ... but not in the way you might think!
  

Read More

Angular Misc

Observables

Observables provide support for passing messages between publishers and subscribers in your application. Observables offer significant benefits over other techniques for event handling, asynchronous programming, and handling multiple values.
Observables are declarative—that is, you define a function for publishing values, but it is not executed until a consumer subscribes to it. The subscribed consumer then receives notifications until the function completes, or until they unsubscribe.
An observable can deliver multiple values of any type—literals, messages, or events, depending on the context. The API for receiving values is the same whether the values are delivered synchronously or asynchronously. Because setup and teardown logic are both handled by the observable, your application code only needs to worry about subscribing to consume values, and when done, unsubscribing. Whether the stream was keystrokes, an HTTP response, or an interval timer, the interface for listening to values and stopping listening is the same.
Because of these advantages, observables are used extensively within Angular, and are recommended for app development as well.

Read More

Angular Forms

Introduction to forms in Angular

Handling user input with forms is the cornerstone of many common applications. Applications use forms to enable users log in, to update a profile, to enter sensitive information, and to perform many other data-entry tasks.
Angular provides two different approaches to handling user input through forms: reactive and template-driven. Both capture user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.
Reactive and template-driven forms differ, however, in how they do the work of processing and managing forms and form data. Each offers different advantages.
In general:

• Reactive forms are more robust: they are more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms.
• Template-driven forms are useful for adding a simple form to an app, such as an email list signup form. They are easy to add to an app, but they do not scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, use template-driven forms.

Read More