Angular 4 integration with Liferay DXP and Firebase
Angular and Firebase seed
A simple starter project demonstrating the basic concepts of Angular and Firebase integration.
Firebase
Firebase helps to build better Realtime Web Application and mobile apps for all the platforms to grow your business.
It provides the functionality like Realtime databases, Analytic, Cloud Messaging and Crash Reporting so we can move quickly and focus on our users. We can also test and deploy our application on Firebase Hosting With Free SSL Certificate. We can use Firebase on client-side app developers (both web & mobile)
Before installing the Firebase, First of all, we need to make sure that below mention software installed properly with appropriate version as mentioned below.
Getting Started
- Make sure you have node.js installed version 6+
- Make sure you have NPM installed version 3.9+
- Deploy using gradle or Eclipse Liferay tools
Install
Run this command in same project directory
npm install
Setting up the Project
- Create a project in the Console.
- Click to Create New Project.
- If you already have a project, click Add App from the project overview page.
- Click to “Add Firebase” to your web app.
- Note the initialization code snippet, which you will need to replace in environment.ts file.
src\main\resources\META-INF\resources\enviroments – sample code
// Initialize
// TODO: Replace with your project's customized code snippet
production: false,
firebase : {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
Liferay 7 DXP Tops Google Trends
Liferay 7 DXP Scale is based on the average worldwide traffic in one year. Awesome!
Recently released Liferay 7 DXP (Liferay Digital Experience Platform) saves the scale of graph in google trends.
Benefits
- Single, consolidated platform
- Securely handle private data
- Easy-to-use interfaces
- Microservices architecture
- Easy to integrate and customize
- Front-end developers can use any popular framework they like (Angular,React)
Liferay trend on google before releasing Liferay 7
How to create a theme in Liferay 7 DXP
Here is the list of software that required to create liferay 7 DXP theme
- NodeJS – for yomen,gulp and generator-liferay-theme
- Ruby Installed – Ruby is to create SaSS and Compass CSS elements
- Yo – Node JS plugin
- Gulp – Node JS Plugin
Installing Node and NPM
First we need to download and install the node if you have already installed and configured Node, feel free to skip this section. We can download Node.js from http://nodejs.org and follow the instructions mentioned here:
Download the installer for your operating system from http://nodejs.org/. Nodejs provides different installer as per your platform. It also include the npm package manager
- If the installation asks for the system restart, then restart your computer.
- Once the system is restarted, we can check whether Node.js was set up properly or not.
- Open the command prompt and run the following command to make sure you are installing latest version:
- node –version // to verify the version
Configure the NPM Path and environment
After NodeJS installation we need to configure the NPM path. we will create .npmrc config file and set manually npm-packages path to keep these plugins at one directory.
Create .npmrc file at user Home directory C:/User/{user-name} with below parameters:
prefix=C:/Users/harmeet.singh/.npm-packages
NPM_PACKAGES=C:/Users/harmeet.singh/.npm-packages
NODE_PATH=%NODE_PATH%:%NPM_PACKAGES%/lib/node_modules
Now we need to install yomen and gulp plugin by giving below command:
- npm install -g yo
- npm install -g gulp
Ruby Installation
Now we need to install ruby sass and compass.
- Download and Install Ruby from here http://rubyinstaller.org/downloads/
- Add the ruby bin path to windows environment variable PATH , so we can access the gem globally
Then run the below command with gem keyword such as (gem sources -r https://rubygems.org):
- sources -r https://rubygems.org
- sources -a http://rubygems.org
- install sass compass
Steps for creating a theme in Liferay 7 DXP
- Create one folder in your local drive where you want to create your theme.
- Now open the cmd in same folder
- Next run this command —yo liferay-theme
- Enter your Theme name “My First Liferay 7 Theme (no need to give “-” between spaces) press enter
- Next —-enter (it will ask you..would you like to use as ID)
- Then select liferay theme version 7.0 or 6.2
- Next — enter the path of app server directory
- then enter the URL of your site – http://localhost:8080
Now we need to update the theme package.json to use Ruby SaSS and Compass by default it use Node SaSS:
- Edit package.json in you theme directory folder and set rubySass to true
- templateLanguage to vm (by default it set to “ftl”)
We have change vm in liferay-look-and-feel.xml file because you will get below error: SERVLET_CONTEXT_/templates/portal_normal.ftl does not exist
Run gulp build to build the theme
Note: if you get the below error while build your theme:
Starting ‘build:compile-ruby-sass’…
error build/_css/aui/lexicon/lexicon-base/mixins/_nameplates.scss (Line 14: Invalid CSS after “(max-width: “: expected expression (e.g. 1px, bold), was “$screen-xs-max)”)
To solve this error do this:
edit the file “\theme-folder\node_modules\liferay-frontend-theme-unstyled\css\aui\lexicon\lexicon-base\_nameplates.scss” and comment below code:
//.nameplate-label-autofit-xs-max {
// @include nameplate-label-autofit('max-width: $screen-xs-max');
//}
Run gulp build deploy again to deploy your theme and start your development
Note: Make sure your are connected with internet while creating theme.
Most popular JavaScript frameworks in 2016
In this modern web JavaScript is the most popular language in the web to building the web application. There are many different ways to build modern web application with JavaScript, including a lot of different tool choices, and a lot of new theory to learn.Using the JavaScript we can easily extend the functionalities and logical executions of the component.
Most of the developer are used JQuery along with JavaScript to extend the features of HTML component,but when we talk about the large application it requires more effort and complex in code to develop and the maintain a large application. JavaScript Frameworks help to build fast,interactive and scalable web applications (which includes both single page and multiple page applications).
But, unfortunately! Most programmers find it hard to decide which framework they use and learn. Thus, in this article, I am going to highlight the 7 most popular JavaScript Frameworks in 2016. Let’s get started!
7 most popular JavaScript Frameworks in 2016
1. AngularJS
When we talked about javascript frameworks the first word comes in our mind is that AngularJS. AngularJS, as this is the most commonly used JavaScript Framework by javascript developers. It released in 2009, javaScript based open-source front-end framework to create web application or SPA (Single page application) mainly maintained by Google.
It supports the MVC (Model–view–controller),MVVM (Modal-view-ViewModal) and MVW (Modal-View-Whatever) design paradigm which supports standard two-way data binding. In MVW, whatever stands for “whatever works for you”. Angular gives you the lot of flexibility to separate presentation logic from business logic and presentation state. In MVC, your data is updated on both the UI (presentation state) and back-end (coding or server side) whenever it detects some changes in the engine.
As the UI components (View) are separated from the Model components, you can easily build reusable components for amazing and user-interfaces!
Recently Angular 2.0 has been released in OCT 2016, which claims to improve the speed & performance of mobile and desktop and take it further via web workers and server-side rendering. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model. Angular Loved by Millions of developers across the globe and it’s highly recommended for anyone who wants a powerful MVC framework with a strong and modern infrastructure that takes care of everything for you to build single page applications.
Angular is also planning to release Angular 4.0 then it called ‘Angular’
Video: See the announcement yourself
(Note: This is my personal favorite JavaScript Framework till date)
2. React
React (sometimes styled React.js or ReactJS) is an open-source JavaScript library which provides a view for data rendered as HTML. Components have been used typically to render React views which contain additional components specified as custom HTML tags. React gives you a trivial virtual DOM, powerful views without templates, unidirectional data flow and explicit mutation. It is very methodical in updating the HTML document when data changes; and a clean separation between components on a modern single-page application. React also support sever-side rendering with with nodejs
As your app comes into existence and develops, it’s advantageous to ensure that your components are used in right manner and React app consists of Reusable components, which makes code reuse, testing, and separation of concerns easy.
ReactJS is not only “V” in MVC, it has stateful components, it handles mapping from input to state changes, and it renders components. I would highly recommend this Framework if you just need a front-end development Framework to build an incredibly complex and awesome UI through the power View Layers. In this sense, it does everything that an MVC does.
Apart from Facebook and Instagram, there are several companies that use React, including Whatsapp, BBC, PayPal, Netflix, Dropbox, etc.
3. Ember
Ember.js is open-source javascript frameworks like angular and react. Initially it released in 2011, 5 year ago. It has a huge active community online, so whenever you face any problem, you can ask them.
Ember.js is based on Model–view–viewmodel (MVVM) design pattern, which is slightly different than MVC, In the sense that the view model is more than view and handles most if not all of the view’s display logic
For the fast server-side rendering with nodejs and adding the animation in UI. we need to use Ember CLI addon Fastboot.js and liquid-fire.js, so the applications have extremely enhanced performance of complex UI with animation.
Ember supports Handlebars integrated templates that update the data changes automatically. It also provides routes, dependency injection, declarative two-way data binding and Custom components.
In 2015, Ember was best JavaScript Framework, competing against AngularJS and React, which should be enough to convince you about its usability and desirability in the JavaScript framework,there are several big companies who’s using ember.js Yahoo!, Zendesk, GROUPON, Yapp, MHElabs, TILDE.
I have not worked much in ember.js but as per my knowledge i would highly recommended this JavaScript Framework to those who don’t necessarily need great flexibility or a large infrastructure, and just prefer to get things done for coping with deadlines.
4. Knockout.js
This JavaScript framework was initially released by Steve Sanderson in 2010 as open source under MIT license. Knockout works under the MVVM design paradigm and that makes it a little different from Ember and Angular.
Knockout has no dependencies on any other libraries and it supports all mainstream browsers like IE 6+, Firefox 3.5+, Chrome, Opera, Safari (desktop/mobile) it’s not popular as much competitors like Angular, Ember or Backbone. The slow growth is simply because of improvements and adding more features in framework.
Developer community is slowly moving to frameworks like React and Angular. Knockout has a great capability and can definitely make a come back but only if someone else adopts it and starts improvement it with the latest web JavaScript technologies.
You can read more about Knockout at knockoutjs.com.
5. Meteor.js
If you LOVE developing the website in pure javascript then MeteorJS is for you. It’s the full stack platform for building modern end to end mobile and web applications completely in JavaScript, for all environments: Application server, Web browser, and Mobile device.
Meteor is the child of Meteor Development Group, it was first released in 2012 as an open source JavaScript framework under MIT license.
Ever since its release, the MeteorJS community too is vibrant and helpful. You would find tons of resources, tutorials and custom packages that give super powers to solve your development errors and develop your app in MeteorJS.
The best thing about MeteorJS is that you use only JavaScript for front-end and backend application development, no need to invest time learning anything else.
The server side packages run in the node.js and you do not need do anything else but MeteorJS packages to access the database, all in JavaScript, this makes developer life easy for building real time web applications.
From Performance perspective, any changes in the database are reflected back on the UI in the real time and vice versa without the handshake between different languages with minimal development efforts.
You can read more about Meteor at – meteor.com.
6. Vue.js
Vue.js is another open-source JavaScript framework was released in 2014. It supports extremely simple API for developing the Reactive components for Modern Web Interfaces Like Ember, it also uses the Model–view–viewmodel (MVVM) design paradigm which helpes in the simplification of the design.
The most important feature in this framework is that you can use selective modules with it for your specific needs. For example, you need to write HTML code, fetch the JSON and create a Vue instance to create the small effects that can reused!
Similar like others JavaScript Frameworks, it also uses two-way data binding to update the model and view, plus it also uses binder for communication between the view and data binder. If you thinking that is full-fledged framework to focus on it then I must say it’s not like what you thinking because it’s focuses entirely on the View Layer, so you would need to take care of other components on your own or you can use any other framework with them.
If you are familiar with AngularJS, then you will feel comfortable with this too, as it heavily incorporates the architecture of AngularJS, so many projects can be easily transferred to this Framework if you know the basics of JavaScript.
As I didn’t get chance to work with that but if you just want to get things done or gain JavaScript programming experience, or if you need to learn the nature of different JavaScript Frameworks you should try this.
7. Backbone.js
This framework can be easily integrated to any third-party template engine, however, by default it has dependancy on Underscore templates along with JQuery, It has the RESTful JSON interface with the support of MVC (Model–view–controller) design pattern.
If you ever heard or used the famous social news networking service reddit, then you will be interested to hear that it uses the Backbone.js for several of its single-page applications. Jeremy Ashkenas who developed the Backbone.js, it has also created the Underscore templates as well as CoffeScript, so you are assured that the developer knows his stuff.
This framework provides models with key-value, views and several modules within a single bundle, so you don’t need to download the other external packages, saving you time. The source-code is available on Github, which means you can further modify it for your needs. There are several big companies who’s using backbone.js 500px Web, Airbnb, Pinterest, Reddit, WordPress.com, USA Today.com,LinkedIn Mobile.
Conclusion
So, I have just highlighted the 7 most popular JavaScript Frameworks in this article in the hopes that it will help you choose the best JavaScript Framework for your tasks.
If you’re still having trouble to choose the best JavaScript Framework for your learning or build web application for your project, then please understand the project requirement and client expectations; and if it doesn’t then just try the next one. Rest assured though that any Framework from the list will be good enough.
The best way to learn code is to write code!!!
Things to remember while building React Application
React Integration with Other APIs
React integration is nothing but converting Web component to React component by using JSX, Redux and other methods of ReactJS.
I would like to share here, best practice to be followed to have 100% quality output.
Things to Remember while creating Application with ReactJS:
- Before you start working on ReactJS, always remember that it is just a View Library, not the MVC framework.
- It is advisable to have small length of component to deal with classes and modules as well as it makes life easy while code understanding, unit testing and long run maintenance of component.
- React has introduced Functions of props in its 0.14 version which is recommended to use, it is also known as functional component which helps to split your component.
- To avoid painful journey while dealing with React-based app, please don’t use much states.
- As I said earlier that ReactJS is only view library so, to deal with rendering part, I recommend to use Redux rather than other framework of Flux.
- If you want to have more type safety then always use propTypes which also helps to catch bug early and acts as a document.
- I recommend use of shallow rendering method to test React component which allows rendering single component without touching their child components.
- While dealing with large ReactJS applications, always use Webpack, NPM, ES6, JSX and Babel to complete your application.
- If you want to have deep dive into ReactJS application and its elements, you can use Reduxdev tools.
If you think this article is helpful and want to learn more in depth with examples Click here
Keep sharing and Enjoy the learning !!!