The most considerable thing about web designing is that it is always changing and deriving. Web designing is the Google’s new design practice; it is the mobile first approach design system. The main aim of the material design is to make everything in a same simple manner so anybody can understand them, even if it is an application with a brand new functionality.
Material design has been defined as a visual concept that works to combine science and technology with the traditional rules and principles of classic design. Material design is like a flat design, but it has more depth than other usual designs. Material design has used bolder colours, layout principles, animated elements, and better use of typography. The most important and used aspect is transitions. Material design has the best psychological traditional effects.
Many well-known companies started to adapt material design for their projects. Companies like Whatsapp, Invision and many more started using material design principle these days.
We have found some great material design based front end framework while we resource in material design, so, in this article we have put together the best material design frameworks for developers.
M-UI Design Framework:
Material UI is a lightweight CSS framework that allows Google’s Material Design guidelines. It was designed from the ground up to be fast, small, and developer friendly. The major goal of the project is to provide a basic set of components and helper methods so that developer can build the sites that are fast and user-friendly.
Material-UI components run on top of Facebook’s React.js library. Everything in the framework is a React component except the basic CSS classes for material colours and typography. This makes a little crucial for non-programmers, since one need to have a good understanding of Javascript, JSX syntax, and basic React concepts.
The framework is much customizable and you can override the style for most of the components by passing custom CSS classes as props to the components under consideration. Roboto fonts are at the crux of Material UI framework for a clean modern look and feel.
The most important goal of building MUI is that the developers can use it fastly, and consistently the UI components across platforms from web to mobile to email to iOS to Android.
Angular Material Design Framework:
An Angular material project is nothing but the implementation of Material design in Angular.js. The Angular material is a complete framework that implements Google’s material design and provides reusable, well-tested, and accessible UI components based on material design. Angular material is created and maintained by Google’s team, who has created the material design guidelines in association with Google’s Angular framework developers.
The framework in the Angular ecosystem will run on directives. All material design components are available as directives and services, the behaviour of the components can be controlled by the usage of attributes.
The developer can customize typography, colours and other components by using the theming layer of the framework.
Angular material package is available in GitHub and can also be built using npm and gulp, alternatively, you can get the distribution files and install locally using Bower.
var app = angular.module(‘StarterApp’, [‘ngMaterial’]);
app.controller(‘AppCtrl’, [‘$scope’, ‘$mdSidenav’, function($scope, $mdSidenav){
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}]);
“ The above code describes Angular module and Angular Controller “
Bootstrap Material Design Framework:
Definitely this one is for all the Bootstrap fans and also for the people who is planning to start a new web project. It would not be completely appropriate to call it as a framework since it is a theme built using Bootstrap 3 that implements Google’s material design.
It comes packed with components and CSS compliant with some material guidelines and so customizable that you can create any layout and obtain any design just by making minor configuration changes.
Bootstrap is the best framework for creating responsive websites at lightning speed and material design is the design philosophy that is fuming at the moment.
You get Bootstrap elements plunged in material design, these includes tabs, navigation bars, typography, buttons, progress bars, sliders, and panels.
Bootstrap is definitely a go without a second thought if you are among the people who do not believe in building websites from scratch.
Final Thought
Material design is raging in the present environment and the whole web and mobile ecosystems are undergoing a mass scale redesign influenced by Google’s material design principles. Frameworks around any new design paradigm are necessary and that is what we are witnessing here with material design.
Let us see how these frameworks shape up and where the web goes from here with material design in near future.
2 Destroy events are fired when a scope is terminated.
The first one is an AngularJS event, “$destroy”, and the second one is a jqLite / jQuery event “$destroy”.
The first one can be used by AngularJS scopes where they are accessible, such as in controllers or link functions.
Consider the two below happening in a directive’s postLink function.
The AngularJS event: scope.$on(‘$destroy’, function () {
// handle the destroy, i.e. clean up.
});
And
element.on(‘$destroy’, function () {
// jQuery plugins already have this handler.
// angular.element(document.body).off(‘someCustomEvent’);
});
The jqLite / jQuery event is called whenever a node is removed, which may just happen without scope teardown.
Ext JS and Angular JS are two industry frameworks for Rich User Interface development and both of them are regarded for powerful features. Sencha Ext JS is often considered as the industry’s most powerful Rich UI application development framework. Best features of Ext JS are cross browser compatibility, advanced MVC (Model View Controller) architecture, plug-in free charting, and modern UI widgets. Angular JS is pretty famous among web developers because of their specialties including two-way data binding, dependency injection and ability to quickly create a custom template (directives). Ext JS is often termed as one stop shop for rich User Interface applications and Angular JS does not have this distinction.
Rich collection of theme able UI components is another prominent attraction of EXT JS. There are a lot of open source components which can be integrated with Angular JS including Angular UI, Wijmo and Kendo. Major similarity of EXT JS and Angular JS is that both of them are suitable for single page applications. Cross browser compatibility is another area in which EXT JS and Angular JS possess obvious similarity. Angular JS depends on jqLite/jQuery that provides cross browser compatibility and integration with third party libraries require cross browser compatibility.
Ext JS vs Angular JS
Similarities between Ext JS and Angular JS
Ext JS as well as Angular JS offer infinite possibilities of cross platform native mobile applications or hybrid apps. Trigger.io is optimized for Angular JS and it is used for developing rich mobile applications. How do we develop mobile sites in Ext JS and Angular JS? Sencha touch is used to develop mobile sites and Angular JS makes use of responsive modules, UI bootstrap, Angular JS response directives, and angular gestures. Built-in-router and deep linking are introduced in both Ext JS 5 and Angular JS.
Browser history, forward and backward button support are being introduced in Ext JS and it was made possible in earlier versions using Ext.util.History. Most single page app which works behind authentication may not require indexing for Search Engine Optimization. For public pages in Ext JS, it is ideal to use static HTML/CSS or AJAX based SEO. In Angular JS, it is best to consider Ajax based SEO with either Prerender.io or headless browser support in web browser. Sencha CMD tool and Sencha sdk tools are the major deployment tools available in Ext JS. Third party grunt tool, Yeoman, and Bower are the package manager functionalities available in Angular JS.
Major difference between Ext JS and Angular JS in the case of licensing is that Ext JS is open source under GPL license and it is an open script Javascript framework under MIT license. Full documentation suite, tutorials, video examples, and trainings are available for both Ext JS and Angular JS. Fascinating feature of Ext JS is that it offers no management concern of integrating new releases and bug fixes from selected 3rd party libraries. Other similar features of Ext JS and Angular JS are built-in animation support and deferred bootstrap.
When to use AngularJS?
Final Verdict:
Ext JS has been the go-to solution for enterprises who have a very specific, long term needs. Angular JS most certainly have their place in web development. However, among these two frameworks Ext JS is component based and the code base with extending API classes as well as configuring models. Object oriented principles and MVC pattern are followed in Ext JS. Angular JS have been described as a “Model-View-Whatever’ framework in which it does not prescribe specific application architecture. Handy components delivered with Ext JS is a huge time saver and Ext JS 5 router can be used to track the application state through the use of browser history stack.
AngularJS, the open source library that everyone could contribute to will now have a sequel in the form of AngularJS 2.x. The lion’s share of contribution in the development of AngularJS is courtesy of Google employees which in a way makes AngularJS, a project of Google.
When AngularJS 2 was first rolled out with the information that 2.x wouldn’t be compatible with AngularJS 1.x, it created a huge havoc in theglobal developer community. Developers complained that this incompatibility would result in numerous hurdles that would be very difficult to deal with. Google, exercising their famed prudence and troubleshooting policy, announced that there would be a few intermediary releases (1.5x) that would pave the way to facilitate a hassle free roll out of the 2.x branch. This consolation however could not calm the nerves of developers.
Let’s have a look at what does Angular 2.x contain and what could be some of the steps to be taken to migrate from Angular 1.x to 2.x (that many devs are discussing).
Handling ANGULARJS 2.0:
AngularJS 1 application can be migrated to Angular 2 application over many commits one component at a time. For this, we can utilize ngupgrade (library) that “will automatically make all of the Angular 1 injectables available in Angular 2”. Mostly probably, Angular 2 will ship with ngUpgrade.js
Typical application upgrade process (at a highlevel)
Here is an example of what an Angular 1 project upgrade to Angular 2 may look like (explains how to handle Scope, Directives, Services and the new “component” style)
1. Include the Angular 2 and ngupgrade libraries with your existing application
The Big Question: Angular 2 doesn’t support 2way bindings. How to handle this scenario?
Directives. You can also write directives in a more futureminded way. First, you can remove almost all references to $scope
2. Pick a component which you would like to migrate
3. Pick a service which you would would like to migrate
4. Repeat doing steps in an order convenient for your application development
5. Once no more services/components need to be converted drop the top level Angular 1 bootstrap and replace with Angular 2 bootstrap.
If you are starting a brand new Application:
1. As the web is moving towards ES6, many web development leaders advise to start writing apps in ES6 (or TypeScript)
2. Stay away from $scope.
3. Start matching controllers with directives (by using ‘controllerAs’ and ‘bindToController’ properties in the directive)
The directive “ngCloak” is used to prevent the” {{ }}” notation from being displayed before angular.js compiles the document. This directive will hide the element until page has been rendered.
This directive can be applicable to the entire ‘body’ element or it can also be applicable multiple times for small chunks of code for the entire document. But the latter is the most preferable because it will allow progressive rendering of the browser.
Browsers such as IE 7, will not be able to provide support to the attribute selector, so the workaround for this is to include the directive as a class.
Ex:
Other browsers -</strong>
<section id=””sample1””>{{Welcome}}</section>
For IE 7 -<section id=””sample1”” class=””ng-cloak””>{{Welcome }}</section>