Spoiler alert: There is! 😉

After posting my blog about how easy it is to get started with web development using OpenUI5 & JSBin, I thought I’d check out existing alternatives!

My result: There are quite a few really good ones. Developers call them Playgrounds. Playgrounds are the newest hit for front end developers and designers. They allow us to play around with code and see the live results while also being able to interact with it. It removes all the hurdles to actually getting started with coding! I wanted to see if I could make use of those playgrounds to run OpenUI5!


So, if you like front end playgrounds and do have a preference already, check out my greenfield OpenUI5 examples to get you started very quick:

Playground OpenUI5 Greenfield (Mobile) Is OpenUI5 officially supported?

JSBin

www.jsbin.com

/wp-content/uploads/2014/12/jsbin_612341.png

JSBin GreenField

YES. Thanks to DJ Adams it is.

Just hit “Add Library” on the left side of the menu bar and choose “OpenUI5 latest (Mobile BlueCrystal)”

JSFiddle

www.jsfiddle.net

/wp-content/uploads/2014/12/jsfiddle_612299.png

JSFiddle GreenField

JSFiddle Master Detail Sample

YES. Thanks to all of you guys, OpenUI5 was added recently! Here’s how to add OpenUI5 properly as pointed out by Andreas Kunz.

Advise: Use the greenfield code sample to get a greenfield project.

Plunker

www.plnkr.co

/wp-content/uploads/2014/12/plunker_612300.png

Plunker GreenField

Plunker MVC GreenField

Kind of, I added the current version (1.24.5) to the packages. You can find it in the packages browser by clicking on “Find and add external libraries” on the right menu bar. Nevertheless, you’d need to add the data attributes to the script tag – which is unfortunate.

Solution: Just use the greenfield code sample.

Update: Denise Nepraunig (@denisenepraunig) published a nice greenfield MVC code example using separate files. Thanks very much Denise!

CodePen

www.codepen.io

/wp-content/uploads/2014/12/codepen_612301.png

CodePen Greenfield

No. Only way is to modify the HTML settings (the gear-wheel icon on the left of the HTML pane). You need to set the script tag yourself to being able to set the data attributes that are required.

Status: Created a support ticket to get OpenUI officially supported.

Solution: Just use the greenfield code sample.

What is your preferred playground and why? Try them out and let me know!

To report this post you need to login first.

9 Comments

You must be Logged on to comment or reply to a post.

  1. Sergio Guerrero

    Alexander, this is a great post. I think this is very beneficial for you, me, and the entire community. I don’t know how many times I have received requests of sample code and sometimes people want a whole example. I personally like this type of examples because I don’t expose my samples, the person asking a question doesn’t expose their code and this is a simple, clean way to show examples.

    (0) 
      1. prasad sistla

        till now, i know about the jsbin, now i came to know about more such type of tools.

        thanks a lot, much appricated and exited Alexander!! 😎

        regards,

        prasad.

        (0) 

Leave a Reply