Saravanan's Corner: Blackberry Dev

Saturday, 29 September 2018

ReactJS



  • JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended

  • Uses virtual DOM which is a JavaScript object. This will improve apps performance since JavaScript virtual DOM is faster than the regular DOM.
  • NodeJS is the platform needed for the ReactJS development. 
  • You can install NodeJS in two ways 
      • Using webpack and babel.
      • Using the create-react-app command.
    • Webpack is a module bundler (manages and loads independent modules). It takes dependent modules and compiles them to a single (file) bundle. You can use this bundle while developing apps using command line or, by configuring it using webpack.config file.
    • Babel is a JavaScript compiler and transpiler. It is used to convert one source code to other. Using this you will be able to use the new ES6 features in your code where, babel converts it into plain old ES5 which can be run on all browsers.
C:\Users\username\Desktop\reactApp>npm init

C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save

Or, you can install all of them in single command as −
C:\Users\username\Desktop\reactApp>npm install react react-dom --save



babel-preset-es2015
babel-preset-stage-2



jscript - es 6, format, browser will not .. download babel to change to es5.. add it in bundle will downgrade

-- v6 engine,  -- 

venilla js - es5
  • Can be used on client and server side as well as with other frameworks.
  • Covers only the view layer of the app, hence you still need to choose other technologies to get a complete tooling set for development.

What is VUE?
Vue.js lets you extend HTML with HTML attributes called directives
Vue.js directives offers functionality to HTML applications
Vue.js provides built-in directives and user defined directives

Friday, 21 September 2018

JAVA - Observer Pattern

1.What is the Observer Pattern?

Observer is a behavioral design pattern. It specifies communication between objects: observable and observersAn observable is an object which notifies observers about the changes in its state.
For example, a news agency can notify channels when it receives news. Receiving news is what changes the state of the news agency, and it causes the channels to be notified.
Let’s see how we can implement it ourselves.
First, let’s define the NewsAgency class:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class NewsAgency {
    private String news;
    private List<Channel> channels = new ArrayList<>();
    public void addObserver(Channel channel) {
        this.channels.add(channel);
    }
    public void removeObserver(Channel channel) {
        this.channels.remove(channel);
    }
    public void setNews(String news) {
        this.news = news;
        for (Channel channel : this.channels) {
            channel.update(this.news);
        }
    }
}
NewsAgency is an observable, and when news gets updated, the state of NewsAgencychanges. When the change happens, NewsAgency notifies the observers about this fact by calling their update() method.
To be able to do that, the observable object needs to keep references to the observers, and in our case, it’s the channels variable.
Let’s now see how the observer, the Channel class, can look like. It should have the update()method which is invoked when the state of NewsAgency changes:
1
2
3
4
5
6
7
8
public class NewsChannel implements Channel {
    private String news;
    @Override
    public void update(Object news) {
        this.setNews((String) news);
    }
}
The Channel interface has only one method:
1
2
3
public interface Channel {
    public void update(Object o);
}
Now, if we add an instance of NewsChannel to the list of observers, and change the state of NewsAgency, the instance of NewsChannel will be updated:
1
2
3
4
5
6
NewsAgency observable = new NewsAgency();
NewsChannel observer = new NewsChannel();
observable.addObserver(observer);
observable.setNews("news");
assertEquals(observer.getNews(), "news");
There’s a predefined Observer interface in Java core libraries, which makes implementing the observer pattern even simpler. Let’s look at it.

2. Implementation with Observer

The java.util.Observer interface defines the update() method, so there’s no need to define it ourselves as we did in the previous section.
Let’s see how we can use it in our implementation:
1
2
3
4
5
6
7
8
9
public class ONewsChannel implements Observer {
    private String news;
    @Override
    public void update(Observable o, Object news) {
        this.setNews((String) news);
    }
}
Here, the second argument comes from Observable as we’ll see below.
To define the observable, we need to extend Java’s Observable class:
1
2
3
4
5
6
7
8
9
public class ONewsAgency extends Observable {
    private String news;
    public void setNews(String news) {
        this.news = news;
        setChanged();
        notifyObservers(news);
    }
}
Note that we don’t need to call the observer’s update() method directly. We just call stateChanged() and notifyObservers(), and the Observable class is doing the rest for us.
Also, it contains a list of observers and exposes methods to maintain that list – addObserver()and deleteObserver().
To test the result, we just need to add the observer to this list and to set the news:
1
2
3
4
5
6
ONewsAgency observable = new ONewsAgency();
ONewsChannel observer = new ONewsChannel();
observable.addObserver(observer);
observable.setNews("news");
assertEquals(observer.getNews(), "news");
Observer interface isn’t perfect and is deprecated since Java 9. One of its cons is that Observable isn’t an interface but a class, that’s why subclasses can’t be used as observables.
Also, a developer could override some of the Observable‘s synchronized methods and disrupt their thread-safety.
Let’s look at the ProperyChangeListener interface, which is recommended instead of using Observer.

3. Implementation with PropertyChangeListener

In this implementation, an observable must keep a reference to the PropertyChangeSupport instance. It helps to send the notifications to observers when a property of the class is changed.
Let’s define the observable:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public class PCLNewsAgency {
    private String news;
    private PropertyChangeSupport support;
    public PCLNewsAgency() {
        support = new PropertyChangeSupport(this);
    }
    public void addPropertyChangeListener(PropertyChangeListener pcl) {
        support.addPropertyChangeListener(pcl);
    }
    public void removePropertyChangeListener(PropertyChangeListener pcl) {
        support.removePropertyChangeListener(pcl);
    }
    public void setNews(String value) {
        support.firePropertyChange("news", this.news, value);
        this.news = value;
    }
}
Using this support, we can add and remove observers, and notify them when the state of the observable changes:
1
support.firePropertyChange("news", this.news, value);
Here, the first argument is the name of the observed property. The second and the third arguments are its old and new value accordingly.
Observers should implement PropertyChangeListener:
1
2
3
4
5
6
7
8
public class PCLNewsChannel implements PropertyChangeListener {
    private String news;
    public void propertyChange(PropertyChangeEvent evt) {
        this.setNews((String) evt.getNewValue());
    }
}
Due to the PropertyChangeSupport class which is doing the wiring for us, we can restore the new property value from the event.
Let’s test the implementation to make sure that it also works:
1
2
3
4
5
6
7
PCLNewsAgency observable = new PCLNewsAgency();
PCLNewsChannel observer = new PCLNewsChannel();
observable.addPropertyChangeListener(observer);
observable.setNews("news");
assertEquals(observer.getNews(), "news");

4. Conclusion

In this article, we’ve examined two ways to implement the Observer design pattern in Java, with the PropertyChangeListener approach being preferred.

Useful link: 
The source code for the article is available over on GitHub.