Posted on

Why MEAN is better than LAMP ?

 

Developing a Web-driven application (either mobile or browser-based) typically requires the provisioning of some server-side infrastructure as well as the development of some code to run on it. Such code will often consume APIs. But occasionally, it provide them as well. For many years, the go-to infrastructure in such situations was affectionately referred to as the LAMP stack and it primarily involved Linux, Apache, MySQL and PHP, Perl or Python. But, thanks in part to Javascript’s applicability to both client and server-side scripting, there’s an another stack that’s now widely considered as an alternative to LAMP; the MEAN stack.

 

What’s LAMP?

linux-2025536_640

Linux, Apache, MySQL and PHP. The holy grail of web development for at least as long as I can remember. This stack represents the foundation of the web.

While its age may be showing, its maturity is strong. The LAMP stack can be altered to replace MySQL with MongoDB, and PHP with Python. The acronym defines a low level configuration for web applications.

What’s MEAN?

Meanstack-624x250

 

MongoDB, ExpressJS, AngularJS and Node.js makes up the MEAN stack. A powerful JavaScript driven stack with diverse capabilities.

Comparatively to LAMP, the database layer is replaced completely with JSON storage using MongoDB. JSON is the native data language of JavaScript. While relatively young, the framework has a growing number of supporters.

This stack is basically a JavaScript lover’s dream.

Now we will look at points , why MEAN is better.

 

Node.js is superfast

 

Apache was great, but these days, Node.js is often flat-out faster. A number of benchmarks show that Node.js offers better performance, while doing much more. Perhaps it’s the age of the code. Perhaps the Node.js event-driven architecture is quicker. It doesn’t matter. These days, especially among impatient mobile device users, shaving even milliseconds off your app’s performance is important and Node.js can do that, while offering a Turing-complete mechanism for reprogramming it.

 

MongoDB is built for the cloud

 

If your Web app plans include making good on the pennies-per-CPU promise of the cloud, the MEAN stack offers a compelling database layer in MongoDB. This modern database comes equipped with automatic sharding and full cluster support, right out of the box. Plug in MongoDB and it spreads across your cluster of servers to offer failover support and automatic replication. Given the ease with which apps can be developed, tested, and hosted in the cloud, there’s little reason not to consider MongoDB for your next project.

 

MySQL’s structure is confining (and overrated)

 

Anyone who has developed or maintained a LAMP-based app for any amount of time knows that MySQL’s strength as a relational database can feel a bit imprisoning at times. Like all relational databases, MySQL forces you to push your data into tables. This isn’t a problem if every single entry fits into exactly the same format, but how often is the world that generous? What if two people share the same address but not the same account? What if you want to have three lines to the address instead of two? Who hasn’t tried to fix a relational database by shoehorning too much data into a single column? Or else you end up adding yet another column, and the table grows unbounded.

MongoDB, on the other hand, offers a document structure that is far more flexible. Want to add a new bit of personal information to your user profiles? Simply add the field to your form, roll it up with the rest of the data in a JSON document, and shove it into your MongoDB collection. This is great for projects in flux and for dealing with data that may ultimately prove tricky to constrain in table form.

 

Angular is a Plus

 

It’s not exactly fair to compare the “A” in “MEAN” with anything in the LAMP stack because LAMP doesn’t include an analog. If you want to do anything on the client side, you’re on your own. Sure, there are plenty of good PHP-based frameworks that work with MySQL, but each is a bit different and moving in its Angular_full_color_logo.svgown direction. AngularJS has been developed as well as maintained by dedicated Google engineers. This means that there is a huge community out there for you to learn from. Apart from that, there are engineers that can help you tackle any challenges you face on the way. It also means that clients get what they want. Most frameworks require programmers to splitting the app into multiple MVC components. After that, the programmer has to write a code to put them together again. AngularJS, however, strings it together automatically. That saves you time, and reduces the app’s time-to-market.

 

AngularJS is more intuitive as it makes use of HTML as a declarative language. Moreover, it is less brittle for reorganizing. AngularJS is a comprehensive solution for rapid front-end development. It does not need any other plugins or frameworks. Moreover, there are a range of other features that include Restful actions, data building, dependency injection, enterprise-level testing, etc. AngularJS is unit testing ready, and that is one of its most compelling advantages.

 

Node.js simplifies the server layer

 

Node.js_logo

Navigating the various layers of the LAMP stack can be a difficult dance of many hats, one that has you shuffling through various config files with differing syntax. MEAN simplifies this through use of Node.js.

Want to change how your app routes requests? Sprinkle in some JavaScript and let Node.js do the rest. Want to change the logic used to answer queries? Use JavaScript there as well. If you want to rewrite URLs or construct an odd mapping, it’s also in JavaScript. The MEAN stack’s reliance on Node.js put this kind of pipework all in one place, all in one language, all in one pile of logic. You don’t need to reread the man pages for PHP, Apache, and whatever else you add to the stack. While the LAMP generation has different config files for everything, Node.js avoids that issue altogether. Having everything in one layer means less confusion and less chance of strange bugs created by weird interactions between multiple layers.

 

JSON everywhere

 

AngularJS and MongoDB both speak JSON, as do Node.js and Express.js. The data flows neatly among all the layers without rewriting or reformatting. MySQL’s native format for answering queries is, well, all its own. Yes, PHP already has the code to import MySQL data and make it easy to process in PHP, but that doesn’t help the client layer. This may be a bit minor to seasoned LAMP veterans because there are so many well-tested libraries that convert the data easily, but it all seems a bit inefficient and confusing. MEAN uses the same JSON format for data everywhere, which makes it simpler and saves time reformatting as it passes through each layer. Plus, JSON’s ubiquity through the MEAN stack makes working with external APIs that much easier: GET, manipulate, present, POST, and store all with one format.

 

Its your choice

 

Of course, if you’re really picky, there’s no reason why you can’t mix it up a bit. Plenty of developers use MongoDB with Apache and PHP, and others prefer to use MySQL with Node.js. AngularJS works quite well with any server, even one running PHP to deliver data from MySQL. You don’t have to be a slave to the acronyms.

programming-1873854_640

This post is inspired from another blog written on this topic

 

Posted on

Make portions of image responsive on your web page

Images are nowadays an important part of web pages. We make our web pages look more attractive and appealing to the users by adding images. We can make it more attractive by adding responsive images. So the big question is how can we make an image responsive.

 

responsive

 

The basic formats of images that we use in our daily life are JPEGs , PNGs , BMPs etc. These formats identify image as one whole entity.So how our code will identify small portions that are there in the image.One thing that we could do is crop our image and break it into smaller images of the portions that we want to make responsive. This will be like our brute force approach to the problem not a smart approach. We might be able to do the task but it will be a very complicated solution and we will have to take care of various corner cases.Smart approach of this problem is using a different less common image format SVG. SVG stands for Scalable Vector Graphics.

technology-1283624_640 We can change our image format into SVG easily either by using an online converter or using an image editing software as Illustrator. The benefit of SVG is that we can see and manipulate parts of our image as code. We can see the code by opening a SVG image into any text editor. Small portions of image is represented as small part of the code which we can manipulate.We can use SVG as HTML attribute. We can directly put the code in HTML code of our web page and manipulate the code by adding on-click and on-hover events to the different parts of the images.

Posted on

Sweet Story of SAPUI5/OpenUI5 and Javascript

Javascript has become new norms for developing applications. Processing at the UI end is becoming more fashionable and every major software-related companies are having their own JS framework. For enterprise giant SAP, SAPUI5/Open UI5 is the new framework. Google and Facebook also have their own framework Angular.js and React.js respectively which are few among the top.

 

The world is changing for good, some may disagree!

When we take a closer look at SAP, ABAP or ABAP/4 was used majorly to create enterprise application and there was a lot of development done with SAP ABAP editor which is inbuilt with SAP Frontend UI also eclipse was second popular IDE used to write ABAP code.

 

Old is Gold.

We also saw the introduction of Web-Dynpro a few years back to leverage Java for developing enterprise applications. After Sun Microsystem was acquired by Oracle and Oracle and SAP are a well-known competitor in the ERP marketplace it was clear for SAP to move away from Java world. Then comes the era of Javascript. In the meantime in the Javascript world after ES6 version of Javascript the possibility and things you can perform were impressive and with HTML5 not only you can leverage the responsive nature of building a mobile application but also can make it much much better looking with CSS3.
And With these open source technologies, UI5 was created.

 

Big moment!

Now comes the major challenge to replace all existing application in SAP with UI5, the answer was SAP Fiori, Fiori means flowers in Italian and apps build with UI5 do follow 5 basic guideline principles to make it look beautiful as a flower. SAP Fiori was launched with 25 applications with HCM, Timesheet apps few popular among the first 25 apps. Now the portfolio of Fiori apps is much bigger covering a wide spectrum of functional fields and more than 500+ apps.

 

Victory!

When we try to predict the future with SAPUI5/Open UI5 and Fiori, we are going to see more of open source stacks coming in like Node.js and Angular.js influence with UI5.

Now the major question comes here: Is it worth learning UI5 or if you are already a UI5 developer it is worth spending time to upgrade the skills and the answer is yes!

 

That’s Right!

Till now we have only seen the tip of the iceberg and there is a lot more to come. At UI5CN we spend a lot of our time( as we don’t have anything else to do) to help people who are starting their career with SAP or upgrade their skills to go to the next level.

 

 

Share this blog if you liked it and tweet it if you want more 🙂

Posted on

7 Reasons To Learn UI5

This blog will pinpoint 7 major reason why UI5 is worth considering if you are looking forward to learn it, to set the context check our previous blog the Sweet Story of SAPUI5/OpenUI5 and Javascript. Basically, UI5 is open source Javascript library build with Javascript, jQuery, HTML5 and CSS3. Using UI5 we can create HTML5 applications, which can then be run in web browser.

 

1.Open Source

Free Stuffs, tell me more !

Open UI5 libraries are open source which means that you pay zero licensing cost to use Open UI5 technologies. If you are creating an app with UI5 it comes under Apache License open source version 2.0 licences and the goals of this licence is to reduce the number of frequently asked questions, to allow the license to be reusable without modification by any project, to allow the license to be included by reference instead of listed in every file etc. Read more about Apache License version 2.0 here.

 

2.Integrate with existing JS libraries:

Javascript can do anything !?

SAPUI5 and OpenUI5 are created using with Javascript so the integration with existing pool of Javascript libraries are easy, UI5 internally uses D3JS analytics libraries to leverage graphs and data representation in nice and beautiful visual forms. In our Advanced UI5 Professional course we have covered this in details of how to add an external libraries elements as components in UI5 itself . See more here.

 

3.Pre-Build Elements

Ready Made Stuffs !

UI5 libraries are equipped with 200+ pre-build elements which allows developers to focus on UX designs of their application and the integration with the existing application of these components which are object based and simple once you know the basic working of MVC with UI5.

 

4.MVC

Different person, different task.

An UI5 Application utilizes MVC framework which clearly separated Model, View and Controls for an existing application and designing complex application with this pattern is much simpler.

 

5.Responsive

Responsive.

When you create a UI5 application with responsive component the component change it’s shape and size to adapt depending upon type of device they are currently being operated on. Thanks to media query of CSS3 which allows it to do so. It provides a much needed benefit to make sure that apps are usable independent of what device your end-user is using to run these apps. Even with custom CSS and media query we can make the look and feel of the application even more customised which we covered in details in our Professional UI5 development course.

 

6.Loose coupling Architecture:

Architecture efficiency !

When we talk about big picture of how these UI5 application are deployed in landscape. They are basically following loose coupling architecture which means the UI5 components are independent of the middleware components and backend. This provides a good degree of separation when we talk about coming up with new version of your application. Your middleware can be a oData service provider like SAP Netweaver gateway or SAP Hana system. Middle ware development is one of the curtal part in any application now as most of the data fetching performance is based on that. Learn how it can be done in details here.

 

7.Comprehensive API reference:

Comprehensive

Finally, API reference provided by SAPUI5/OpenUI5 is comprehensive which helps a lot to understand how to use these libraries. The explored provided is a big help to see how individual component will look like and what are the code to be written to include it.

 

Some of the disadvantages related to UI5 is it’s initial high loading time of libraries, that means libraries can take time when they are initially loaded in your web browser this can also be fixed by using early loading concepts .

Check some of our Free and Paid resources to learn UI5 here, these are made by people who knows a lot about UI5 but are too lazy to work as consultant/contractors 🙂

Share if you like it and tweet if you want more !

 


 

Posted on

7 Best Websites While Learning UI5

To learn anything worthwhile the most important thing is always the mindset one must-have. People who have a rage to master can beat the learning curve and learn things faster than rest. In this blog, I am sharing my top 7 places to learn SAPUI5/OpenUI5.

 

1.SCN 

 

A social network, you can use in your office!

SAP Community Network is by far the best place to learn, explore and connect with mentors. It not only provides a good place to get answers to your questions but also a good platform to see what other people are up to with UI5.

 

2.Git hub and Developer Guide

 

Free and cool at the same time!

Git hub is by far the best place for hackers to see how UI5 libraries are designed and build. The core development code is open source in Open UI5. And I will admit Git hub documentation is even better than by Learn UI5 Book sold at Amazon. The only issue is you need to have a strong Javascript background to take full advantage of this because many concepts here are explained with jargon from the Javascript world which belongs to pretty advanced skills.

Developer Guide is also another great starting point which can be a place to take your skills to the next level in a step by step manner.

 

3.Experience.sap 

Slides and Presentations are also important.

This is an excellent place for knowledge and gets to know the design and business side of SAP UI5 and SAP Fiori( Fiori apps are pre-built apps, build with UI5). And experience.sap can be an excellent resource if you are looking for some points to create a sales pitch to your customer to make them bring SAP UI5/Open UI5 apps or Pre-build Fiori apps.

You should check the UX cost calculator to justify why a business should invest in UX. It is one of the coolest things you can show to your business analyst.

 

4. UI5CN

 

Finally!

Not far behind but at number 4, I would recommend UI5CN courses and blogs. To keep it short and simple UI5CN has covered the entire spectrum of UI5 Apps End-to-End in the most simple way and already more than 7000 users have gone through it both paid and free courses. The books are also written in simple words and covers all the aspect of development one needs to know to work as a professional UI5 developer. UI5CN tries to keep the learning curve simple, so even if you have no background of Javascript or even with SAP you will find it easy to follow and easy to implement in real projects.  Courses are also filled with lots of examples of comprehensive, concepts and experiences both are shared at the same time.

 

5.OpenUI5 org 

 

I read this blog!

Openui5.org is an excellent resource to start exploring UI5 and the best thing is that all the details one has to know are shared with links. Must check resource for someone who is starting out with SAPUI5/OpenUI5.

 

6.Stackoverflow 

 

Answer to all technical problems!

Like all other technologies, StackOverflow is an amazing place to see what are the current issues and solutions which people have posted in relation to UI5. Not only you will get to know issue and how to solve them and ask more questions, but also you will get to know people who are Professional with UI5 and connect with them.

 

7.Twitter 

 

It is way more important!

It might come as a surprise but personally, it is my go-to platform if I want to know what is happening in UI5 work with #openui5 tags and similar tags, you can connect with technology mentors and learn a lot more. And there is a good chance that you might also get a glimpse of new things which are going to come in the UI5 world and the amazingly cool world of open-source SAP.

Like any other technology UI5 also have its learning curve and luckily compare to other JS libraries like D3JS, it is not much difficult to learn. If you have a hacker mindset and are an explorer then you don’t even need any hand helding to learn UI5. The API reference is quite comprehensive and with UI5 explorer you can even see live examples of how individuals components can be used.

Please share and let us know if you find this blog helpful 😀