How OpenUI5 & JSBIN enables students to learn and experience web development

Before I’ll answer the question, let me step back and set the stage for my arguments! I was invited by Leigh Jin, an associate professor at the San Francisco State University, to give a guest lecture on OpenUI5 two weeks ago. I was obviously very excited and prepared some code examples and a presentation for the lecture. Here’s what I did: I created all my code examples on jsbin.com, which is a tool/website to collaboratively code in JavaScript. It’s an amazing website – allowing you to develop a website using HTML, JS and CSS. But, here are the two best features from my point of view: You can see the outcome of your code and interact with it and you can use libraries like jQuery, Twitter’s Bootstrap, AngularJS and .. OpenUI5!

Let’s jump into it directly to see how it looks like. Here’s one of my code examples: https://jsbin.com/howoyeqoki/1/

During my presentation, I displayed just this website and did some live coding to demonstrate how fast you can get things done with OpenUI5. I also shared the URL and let the students live code by themselves. The outcome was fantastic! Leigh and the students liked it a lot! For me, it was kind of a big surprise.. I’m in the SAP ecosystem for less then two years and I heard a lot about how complex things can get. Leigh is experienced in conducting SAP student classes and she also knows many SAP solutions. She explained to me that this live coding approach is exactly what she was looking for! By the way, she did not even considered to teach OpenUI5 before I showed her how I used to teach people about OpenUI5. She knows how much preparation SAP classes require: setting up the servers, get and upload sample data, setting up the student’s PC to have necessary development tools running, .. the list goes on and on. But, with this approach, you don’t need any of those. You can throw away the overhead and jump into code directly – within the browser of your choice!

And finally, here’s the list you were probably looking for after reading the title:

• No need to download nor install any sources and not dealing with folder structures, correct paths and so on
• No need to download and setup any IDEs, plugins, SDKs or what so ever – just open your pre-installed browser
• No need to start from scratch anymore. Simply setup a greenfield template like this one: OpenUI5 Mobile Greenfield Example
• No need to create a system for student’s submissions. Share your URL and let them code. At the end, let them sent over their final URL to you.
• No need to have to setup any server side components or APIs – just use existing public APIs for teaching purposes
• No need to understand and deal with complex debugging modes of IDEs. You can use OpenUI5s “Diagnostics” popup (Ctrl + Alt + Shift + S) or simply print to console & open the console view on jsbin
• Simply use copy&paste to prototype your desired application using the code examples provided here: OpenUI5 SDK – Demo Kit

And now it’s your turn: What do you think? Try out that approach and share your experience in the comments!

If you’re looking for some code examples or just would like to see my slides, click here. And if you’re interested in the SFSU class and our collaboration with them, please check out this site. Also, it’s nice to see that by adding this web development class with OpenUI5, SFSU is bringing SAP’s Student Recognition Award to their MBA program! Congrats!