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.
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.
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.
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 🙂
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 🙂
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.orgis 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 😀
Proof of concepts A.K.A POC are quite popular to show your user/customer the possibility and give them a feel and experience of how a big project can look like before committing for it with resources and time.
It is very common in consulting companies that people use POC not only to validate an idea but also to learn technology. You will get a hands-on experience of the technology on a smaller scale which will help you understand the end-to-end inner working of it and give you the confidence to work with it.
Start of a new Journey !
Here are our Top 7 Tips to make awesome PoC, may it be UI5 or any other like (Angular, Node, Backbone etc.)
Rule #1 is to understand why you are making your POC ? Apart from learning the technology, understand the functional working of it so you can make it meaningful for customers or users.
2. You don’t need to do everything :
Shortcuts are ok here !
You are not in a project but a POC, the data can be like:
{
“Name” : “Some Name”,
“Date”: “Some Date”,
“Age”: “000”,
}
In real projects all details should meet with exact level of accuracy but in POC you can be a little relaxed. This removes a big burden from your shoulder because getting those details right is a tedious task and devil is always there in details and you can skip that devil now 😀
3.Good artist copy, but Great artist steal :
Copying is not bad !
The open source community is huge and they are motivated by the desire to share. You will be suprised by the kind of projects and code which are available online for free. Check MIT project. repo, GIT hub, Google Projects they are filled with gems, all you need is understand how to use it and most importantly is it useful in your application ? Keep in mind that you should not add the feature just to add the feature but the main focus should always be in solving the problem.
4.Make multiple iteration :
Improve with iterations .
When you start working on the technology for the first time then it will surely happen that you will mess up a lot so be prepared to have many versions of your app like :
appV01
appV02
appV03
…
appVPleaseGodMakeItWork !
5.It is not only ok but good practice to show your ugly uncompleted project to your user:
Don’t keep the projects/features as a surprise to user.
We are not Leonardo Da-vinci so we should stop acting like him. A feedback in middle of development from your user will give you necessary validation if you are on right track or not which will save your valuable time and keep the project useful for your users or customers.
Always appreciate your users feedback, the philosophy that your user don’t know much about technology and might not know what you are doing has only worked well for Steve Jobs.
6.Do not spend time in reinventing the wheel :
Not this wheel !
In a PoC, you are trying to do a lot of stuffs with new paradigm and technology but you should not go into the trap of trying to solve something which is already solved the best way or available for free to use.
Two of my previous attempt where to spend time to make a database when I was making a work permit management POC app and the other one is to make a web dispatcher when I was making a shipment POC app.
These subproject where complete project in itself and took a lot of my time which might not be a waste but was hard to justify to stake holders.
7.Speak like a human in your POC presentation :
Don’t go toooo… far in presentation !
After months or weeks of effort when you are going to show your work to stakeholders don’t speak the language of aliens in presentation. They are seeing it for the first time, so make it sound human and useful, also don’t let your managers to take all your credit too 😉
Please share it ! If you like it and tweet if you want more 🙂
