Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TodoMVC in SAPUI5 #511

Closed
wants to merge 1 commit into from
Closed

TodoMVC in SAPUI5 #511

wants to merge 1 commit into from

Conversation

schubertha
Copy link
Contributor

Hello everyone,

I work for SAP and have lately been looking into TodoMVC. The work you have started is really a great way to find out about and compare MVC JavaScript frameworks.

Now, at SAP we have developed a new JavaScript UI framework SAPUI5 that among other things features a MVC implementation as well as data binding.

I implemented the todo application and blogged about it on the SAP Community Network: http://scn.sap.com/community/developer-center/front-end/blog/2013/03/19/how-to-build-testable-sapui5-applications

While I made a copy of the code available on the SAP-owned code repository CodeExchange, I would also like to contribute a copy back to your GitHub project.

Please let me know what you think.

Best regards,
Harald Schubert

@addyosmani
Copy link
Member

Thanks for your submission! We'll review and get back to you shortly.

@passy
Copy link
Member

passy commented Apr 4, 2013

@schubertha I didn't know SAP had their own MVC framework. Very interesting. :)

Could you check out our Contribution Guidelines and update the code to match the code style described there?

@sindresorhus
Copy link
Member

Closing for lack of communication. @schubertha Feel free to reopen if you want to continue this.

@schubertha
Copy link
Contributor Author

Hello everyone, sorry for not getting back to you earlier. I now managed to look into the contribution guidelines and update the sources as required (force-pushed into my fork). Can you re-open this very pull request or shall I create a new one?

Regards, Harald

@passy passy reopened this Apr 23, 2013
@addyosmani
Copy link
Member

Thanks for taking the time to update. @passy could you review the implementation for spec conformance?

@ghost ghost assigned passy Apr 24, 2013
@passy
Copy link
Member

passy commented Apr 24, 2013

@schubertha Thanks for the update!

Could you remove the Eclipse configs and other settings files? We want to keep the repository lean.

oRootView = sap.ui.view({
type : sap.ui.core.mvc.ViewType.JS,
id : 'todoView',
viewName : 'todo.Todo'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No space before the colon:

oRootView = sap.ui.view({
    type: sap.ui.core.mvc.ViewType.JS,
    id: 'todoView',
    viewName: 'todo.Todo'
...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

@passy
Copy link
Member

passy commented Apr 24, 2013

Could you move the contents of WebContents/ one level, so /labs/architecture-examples/sapui5/ loads the application?

We usually want the app to be self-contained and not reference external resources or CDNs. Is it possible to include the lib or what that cause licensing issues?

this.controls.push(todosRepeater);

// Counts open todos
todoCount = new sap.ui.commons.TextView('todo-count', {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are some SAP CSS classes applied to this that override the base.css rules and make it look slightly different than the other apps. Could you look into that?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

@passy
Copy link
Member

passy commented Apr 24, 2013

The 'clear completed' action is missing.

@schubertha
Copy link
Contributor Author

This will take a bit. Please don't close the pull request - I'm working on it.

Thanks!

@passy
Copy link
Member

passy commented Apr 26, 2013

@schubertha Great! Looking forward to it. :)

@schubertha
Copy link
Contributor Author

Almost there.

@schubertha
Copy link
Contributor Author

Hey there,

I think everything you asked for should be in now (with the exception of SAPUI5 itself which I can't push to Github for licensing reasons). Can you please check?

One problem I still have is that the app doesn't seem to load if I try to test it via http://htmlpreview.github.io. Is there any other way I can ensure things are working properly?

Best regards,
Harald

@passy
Copy link
Member

passy commented Apr 28, 2013

Thanks for the update, @schubertha! I usually just check the branch out and run it locally.

There are still some visual deviations from the template:

download

  • There's a padding at the top
  • Checkmarks aren't vertically centered and too small
  • Text in the footer overwrites the base stylesheet's color.
  • There's no 'destroy' button next to the Todo items.
  • The info text in the bottom should not include the version number or supported browsers.

It's easiest to open a compliant example like the Angular or Backbone one and compare it to them.

@schubertha
Copy link
Contributor Author

Hi,

can you tell what browser you are using? Also, I didn't get your last point. Do I read it right supported browsers should NOT be mentioned? Then, how am I supposed to tell what browsers are supported? I hope I am not forced to support all browsers. The examples I saw usually also only work well with Cr and have issues on other browsers.

Regards,
Harald

@passy
Copy link
Member

passy commented Apr 28, 2013

can you tell what browser you are using?

I took that screenshot in Chrome on Linux.

Also, I didn't get your last point. Do I read it right supported browsers should NOT be mentioned? Then, how am I supposed to tell what browsers are supported? I hope I am not forced to support all browsers. The examples I saw usually also only work well with Cr and have issues on other browsers.

As per spec all modern browsers + IE9 should be supported.

@schubertha
Copy link
Contributor Author

Ok, I'll let you know when I am through with this.

I'm afraid I can't test on Linux right now. On Windows, Chrome renders the page w/o difficulties (no padding issues, no inadequately sized checkmarks). Is this acceptable?

BR,
Harald

@passy
Copy link
Member

passy commented Apr 30, 2013

Hey Harald,

that's fine. Tell me when you're done with the optimizations for the browsers you have access to and I can try to cover the Linux side.

@sindresorhus
Copy link
Member

ping

@schubertha
Copy link
Contributor Author

Still there...

// Text field for entering a new todo
newTodo = new todo.SmartTextField('new-todo', {
placeholder : 'What needs to be done?',
autofocus : !$.browser.msie && !$.browser.opera
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opera and IE will not show the placeholder in case you focus. By not focusing initially, you still see the placeholder...

@passy
Copy link
Member

passy commented May 22, 2013

I went through the code on my phone and will check the visuals on Linux
later today. Thanks for the update, Harald!
On May 17, 2013 7:04 PM, "schubertha" notifications@github.com wrote:

Hi there,

Sorry for the delay, but I was on a business trip. I now updated my fork.
TodoMVC now runs in latest versions of Chrome, Firefox, Opera as well as
IE9 -- on Windows. Unfortunately, IE9 will not interoperate with the CDN
version of SAPUI5. https://sapui5.netweaver.ondemand.com documents this
issue. It's related to the fact that the XmlHttpRequest (XHR) of the IE
doesn't support Cross-Origin Resource Sharing (CORS). IE9 testing will have
to be done locally (e.g. using the Mongoose HTTP server).

Now, getting back to testing on other OSs: If you guys could subsequently
try to make it work on Linux, I'd be thankful for that.

All the best,
Harald


Reply to this email directly or view it on GitHubhttps://github.com//pull/511#issuecomment-18073637
.

@passy
Copy link
Member

passy commented May 22, 2013

A few things regarding spec compliance:

  • Inputs should always be trimmed.
  • Empty TODOs should be removed.
  • Empty TODOs should not be added.
  • Edit mode should be left on blur.
  • Double-clicking an item should not select the text, but place the cursor of the end of the input.

@schubertha
Copy link
Contributor Author

Hi passy,

I went through all your change comments. I also figured out I had an outdated Chrome version (v24). After updating, I also had the "padding at the top" issue. I fixed this now.

Thanks in advance,
Harald

@passy
Copy link
Member

passy commented May 22, 2013

After updating, I also had the "padding at the top" issue. I fixed this now.

That's wonderful! I'm going to go through it again tomorrow and I think we're getting close now. :)

sap.ui.commons.TextField.extend('todo.SmartTextField', {
metadata: {
properties: {
'placeholder': 'string',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you unquote the keys here?

@passy
Copy link
Member

passy commented May 23, 2013

If there are no items, the footer and the toggle button at the top should be hidden.

@passy
Copy link
Member

passy commented May 23, 2013

And I just noticed that the font color in the footer is slightly different from the standard.

@schubertha
Copy link
Contributor Author

All done. Thanks for checking!

-Harald

jQuery.sap.declare('todo.formatters');

todo.formatters = {
// Returns whether all todos are completed
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This block is indented one tab too deep.

@passy
Copy link
Member

passy commented May 25, 2013

Thanks again, @schubertha! Code looks good to me now apart from that one nit-pick. I will go through the style discrepancies on Linux soon.

@schubertha
Copy link
Contributor Author

@passy - many thanks!

@passy
Copy link
Member

passy commented Jun 9, 2013

@schubertha As @sindresorhus found out, adding body { font-size: 14px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; } removes a lot of the subtle differences to the other apps. It does cause some misalignments in other places, though. Could you take a look if this helps in any way?

@stephenplusplus
Copy link
Member

Also important, at least in my setup (OS X / Chrome), is font-smoothing: antialiased. The todomvc-common/base.css file already has it as a rule on body. I haven't looked too closely, but it seems to be overwritten somewhere.

@schubertha
Copy link
Contributor Author

@passy, I'm not sure I could follow. What issues are you trying to fix exactly? I can of course add the line you requested and see how this breaks the UI on Windows but is it his what you want me to do?

@stephenplusplus
Copy link
Member

@schubertha Here's what I'm seeing on OS X Chrome:

Active = correct, Completed = incorrect

The Active text has -webkit-font-smoothing: antialiased !important applied to it, the Completed is untouched. This may be related to what @passy is experiencing.

@schubertha
Copy link
Contributor Author

Hi @passy, I have tweaked the CSS further and changed the order in which CSS gets loaded. I think the font family is correctly interpreted now. I also cannot find a difference in font aliasing between the SAPUI5 version and the Backbone.js version. Thanks for checking.

@passy
Copy link
Member

passy commented Jun 30, 2013

@schubertha Thanks again for the update, I'm sorry I couldn't help out within the last weeks.

I ran the example in a Windows VM to get a feeling for it and I see the same layout differences as on Linux.

SAPUI
sapui

Backbone
backbone

50% overlay
combines

Which configuration did you test it in?

@schubertha
Copy link
Contributor Author

Thanks for the overlay. Good one. I'll look into those final differences. Just to confirm: you are really interested in pixel-perfect positioning of the texts in the footer and the icons - the rest is fine?

@passy
Copy link
Member

passy commented Jul 2, 2013

Wow, this reminds me a certain kind of discussion I had with so many clients, but where I was arguing for the other side. :) In this case, however, a pixel-(near-)perfect position can be really helpful for the sake of comparison. Especially if this involves some extra hoops you have to jump through with a particular framework, because in some cases this actually is a project requirement. I'd really appreciate it if you could try to get as close as possible to the other apps.

I will try to review the rest of the app tonight, so we can merge this straight away when the layout fixes are in.

@schubertha
Copy link
Contributor Author

Sure, sure. I'm not arguing against it. I just wanted to hear your expectation. Working on further enhancements later today probably...

@schubertha
Copy link
Contributor Author

@passy here is another update with a (to my view) pixel-perfect positioning:

overlay

Hopefully this works for you :)

@passy
Copy link
Member

passy commented Jul 3, 2013

@schubertha Excellent work! Thanks for being so patient and understanding. So glad we could finally merge this! 🍻

@passy
Copy link
Member

passy commented Jul 3, 2013

Merged via c2f442d

@passy passy closed this Jul 3, 2013
@schubertha
Copy link
Contributor Author

@passy this is great! I'm happy to see this live now!

🍻

All the best,
Harald

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants