Polymer-Native / HTML-Native integration

[PixelsCommander]

You may follow these steps to start making changes in PN repo https://github.com/PixelsCommander/polymer-native/blob/master/README.md#contributor-guide

Basically you can fork PN https://github.com/PixelsCommander/polymer-native and try to refactor https://github.com/PixelsCommander/polymer-native/tree/master/partials/js-library/src/elements/router to extend your elements but still have logic as following:

Router should:

1.Have tagName <native-router> (extend rebel-router) because native part of PN reacts on tagName to produce native classes

2.When created execute logic from PnBaseElement.createdCallback https://github.com/PixelsCommander/polymer-native/blob/master/partials/js-library/src/elements/base/pn-base-element.js#L4

• Get this.polymerNative.id with polymerNativeClient.utils.getNextId();
• Register at elements object

3.When attached execute logic from PnBaseElement.attachedCallback https://github.com/PixelsCommander/polymer-native/blob/master/partials/js-library/src/elements/base/pn-base-element.js#L10

• Call self.updateSerializedProperties to form text package to be sent to native bridge
• Call polymerNativeHost.createElement(self.polymerNative.serializedProperties);

Route shoule have tagName <native-route> (extend rebel-route) and implement 2,3 as well as router.

When route is changed call window.polymerNativeHost.activateRoute(self.polymerNative.id);

[RevillWeb]

Is there any significance to what native-route does? Is it simply that it fires window.polymerNativeHost.activateRoute? If so I don't think there needs to be any code here as this can be triggered from the router and not the route - maybe I am missing something though?

[PixelsCommander]

yeah, activate / deactivate

moving this to route class is more a responsibility separation in advance, it could happen that with time route activation became very complex

there is already skipNative logic with is crucial to have since it allows to change route vice versa from native code to js without triggering change baco and having infinite loop

[RevillWeb]

I've spotted the skipNative functionality. I've also spotted that a polymerNative route ID is generated for each route. I think the different with rebel-router is that a "route" isn't a physical thing. Once the router has attached it removes all of the route elements and only displays the current route. Is this going to cause a problem on the native side? Is there a way we can tell the native side these "routes" exist even though they wouldn't in the DOM?

[PixelsCommander]

Let`s try as it is now, could work

2016-07-04 22:04 GMT+02:00 Leon Revill notifications@github.com:

I've spotted the skipNative functionality. I've also spotted that a polymerNative route ID is generated for each route. I think the different with rebel-router is that a "route" isn't a physical thing. Once the router has attached it removes all of the route elements and only displays the current route. Is this going to cause a problem on the native side? Is there a way we can tell the native side these "routes" exist even though they wouldn't in the DOM?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/RevillWeb/rebel-router/issues/3#issuecomment-230348481, or mute the thread https://github.com/notifications/unsubscribe/AAxer4dExYXummjgevV3pt_AZwvySoZtks5qSWdqgaJpZM4JBhB8 .

[RevillWeb]

Ok, this is what I am thinking currently: https://github.com/RevillWeb/polymer-native/blob/master/partials/js-library/src/elements/router/pn-router.js However I don't have an iOS device with me tonight so I'm coding a little blind.

Do you think this could work, other thoughts?

[RevillWeb]

When I try to open the polymer-native-template.xcodeproj I just get Xcode quit unexpectedly every time. What version of XCode are you using?

[PixelsCommander]

Open workspace please, not project

2016-07-05 15:09 GMT+02:00 Leon Revill notifications@github.com:

When I try to open the polymer-native-template.xcodeproj I just get Xcode quit unexpectedly every time. What version of XCode are you using?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/RevillWeb/rebel-router/issues/3#issuecomment-230473414, or mute the thread https://github.com/notifications/unsubscribe/AAxer3WpEUeVdR4HmD6F1AcL3DpSh24Aks5qSlekgaJpZM4JBhB8 .

[RevillWeb]

Same issue unfortunately. I've seen similar problems before which have usually been due to different environments and XCode can't get at something it thinks it should be able to - no idea what it could be though :/

[PixelsCommander]

I ll have a look at version at home. Office laptop is not set up for PN development

2016-07-05 15:23 GMT+02:00 Leon Revill notifications@github.com:

Same issue unfortunately. I've seen similar problems before which have usually been to different environments and XCode can't get at something it thinks it should be able to - no idea what it could be though :/

On Tue, Jul 5, 2016 at 2:13 PM Denis Radin notifications@github.com wrote:

Open workspace please, not project

2016-07-05 15:09 GMT+02:00 Leon Revill notifications@github.com:

When I try to open the polymer-native-template.xcodeproj I just get Xcode quit unexpectedly every time. What version of XCode are you using?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <

https://github.com/RevillWeb/rebel-router/issues/3#issuecomment-230473414

, or mute the thread <

https://github.com/notifications/unsubscribe/AAxer3WpEUeVdR4HmD6F1AcL3DpSh24Aks5qSlekgaJpZM4JBhB8

.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub < https://github.com/RevillWeb/rebel-router/issues/3#issuecomment-230474081 , or mute the thread < https://github.com/notifications/unsubscribe/ACmBKlRnyMe7xX5cHe6h_QA10tLQQEikks5qSlhMgaJpZM4JBhB8

.

Leon Revill Web architect, blogger & author. Working hard to make awesome things for the web platform, mostly with web components.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/RevillWeb/rebel-router/issues/3#issuecomment-230476627, or mute the thread https://github.com/notifications/unsubscribe/AAxer9KX_sM_5WQl64YZn7Yu6rbYW1Lxks5qSlrTgaJpZM4JBhB8 .

[RevillWeb]

Appreciate it!

[PixelsCommander]

XCode Version 7.3 (7D175)

[RevillWeb]

Same version here. I will try your original repository and see if it is a result of my integration changes.

[PixelsCommander]

Weird. Do not think JS code can affect this

[RevillWeb]

I'm clutching at straws, it's possible I broke something though - I'll check anyway to be sure.

[RevillWeb]

Same issue with the repo freshly cloned :(

[PixelsCommander]

Are you able to open other projects with your xcode?

[RevillWeb]

Yes fine. I actually have Version 7.3.1 (7D1014) - not sure that would make a big difference?

[PixelsCommander]

I ll try to upgrade open/save and push changes then

[RevillWeb]

Great thanks - worth a try.

[RevillWeb]

Hey, tried your repo (not my fork) on a colleague's machine with XCode Version 7.3 (7D175) and still have the same issue :(

[PixelsCommander]

OMG, sounds crazy, going to try in office right now

2016-07-06 15:44 GMT+02:00 Leon Revill notifications@github.com:

Hey, tried your repo (not my fork) on a colleague's machine with XCode Version 7.3 (7D175) and still have the same issue :(

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/RevillWeb/rebel-router/issues/3#issuecomment-230775086, or mute the thread https://github.com/notifications/unsubscribe/AAxer3ngtldBNY3KjsiqtJ68F0rpCoMyks5qS7EngaJpZM4JBhB8 .

[PixelsCommander]

Just tried on fresh laptop, works like a charm.

Cloned repo Launched Xcode File -> Open And opened this one clonned locally https://github.com/PixelsCommander/polymer-native/tree/master/partials/ios-template/polymer-native-template.xcworkspace

2016-07-06 15:53 GMT+02:00 Denis Radin denis.radin@gmail.com:

OMG, sounds crazy, going to try in office right now

2016-07-06 15:44 GMT+02:00 Leon Revill notifications@github.com:

Hey, tried your repo (not my fork) on a colleague's machine with XCode Version 7.3 (7D175) and still have the same issue :(

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/RevillWeb/rebel-router/issues/3#issuecomment-230775086, or mute the thread https://github.com/notifications/unsubscribe/AAxer3ngtldBNY3KjsiqtJ68F0rpCoMyks5qS7EngaJpZM4JBhB8 .

[RevillWeb]

Thanks! Just to be clear on the steps I took:

1. Clone polymer-native repository
2. Run npm install
3. Run gulp
4. Navigate to ios-generator/app/templates/ios/
5. Double click polymer-native-template.xcworkspace
6. Get XCode error, see attached screenshot

I couldn't see any docs around this process - maybe this isn't what I am supposed to be doing?

[PixelsCommander]

This is a wrong file. Correct one is in "partials" folder. Yoman template contains template strings instead of project name which looks like <% project-name %/> and definitely can crash XCode.

2016-07-06 16:01 GMT+02:00 Leon Revill notifications@github.com:

Thanks! Just to be clear on the steps I took:

1. Clone polymer-native repository
2. Run npm install
3. Run gulp
4. Navigate to ios-generator/app/templates/ios/
5. Double click polymer-native-template.xcworkspace
6. Get XCode error, see attached screenshot [image: screen shot 2016-07-06 at 15 00 48] https://cloud.githubusercontent.com/assets/2720042/16620468/74692a2e-438a-11e6-88ee-4926ad63b010.png

I couldn't see any docs around this process - maybe this isn't what I am supposed to be doing?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/RevillWeb/rebel-router/issues/3#issuecomment-230780123, or mute the thread https://github.com/notifications/unsubscribe/AAxer4BBG90RdTzW-yq4XBEgBNgKu3Z3ks5qS7UogaJpZM4JBhB8 .

[RevillWeb]

Right, that opens. I'll try my changes when I get home. Thank you!

[PixelsCommander]

Np, thanks for patience and detailed report. Having two ios projects there is tricky but do not see a way around so far.

2016-07-06 16:40 GMT+02:00 Leon Revill notifications@github.com:

Right, that opens. I'll try my changes when I get home. Thank you!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/RevillWeb/rebel-router/issues/3#issuecomment-230792733, or mute the thread https://github.com/notifications/unsubscribe/AAxerx5bPtv97xoUOx0uNqjlv0RrOfh3ks5qS75UgaJpZM4JBhB8 .

[RevillWeb]

Not a problem. I've had a quick look at I get an exception when trying to change route. I'm not an iOS developer and don't know Objective-C or Swift so I'm not sure how much further I could go. When I get home I will do some debugging and try and get as much useful information for you as possible.

I will have a go and try to figure out whats going on. I don't fully understand how the native-route elements map to what is available on screen on the iOS device.

Thanks again.

[PixelsCommander]

I ll try to compile from your branch as well tonight

[RevillWeb]

So this is the error I am getting (as far as I can see): fatal error: unexpectedly found nil while unwrapping an Optional value

From what I can see it calls activateRoute and provides an ID of string "2". It then fails when calling return PNBaseElement.elements[id]!.

When I looking in elements there are size items with indexes 0-5. Assuming the ID is supposed to be the index that looks fine. There doesn't appear to be an element within elements with an actual ID of 2 though - I have no idea if this even matters?

I hope this helps in some way, sorry I'm unable to be more help with the native code.

[PixelsCommander]

I see.. There is no route view in iOS part created. PNBaseElement.created and attachedCallbacks do this.

The easiest way to fix it is to call this methods in corresponding route callbacks.

I remember your point about virtual routes but do they really have to be virtual? Anyone familiar with Web Components approach is ok to have some custom elements there and this is basically what is expected. In opposite - something which was added and then removed from DOM is unexpected. Also when they are in it is easier to style separate pages/routes with native-route or rebel-route selectors.

2016-07-06 18:10 GMT+02:00 Leon Revill notifications@github.com:

So this is the error I am getting (as far as I can see): fatal error: unexpectedly found nil while unwrapping an Optional value

From what I can see it calls activateRoute and provides an ID of string "2". It then fails when calling return PNBaseElement.elements[id]!.

When I looking in elements there are size items with indexes 0-5. Assuming the ID is supposed to be the index that looks fine. There doesn't appear to be an element within elements with an actual ID of 2 though - I have no idea if this even matters?

I hope this helps in some way, sorry I'm unable to be more help with the native code.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/RevillWeb/rebel-router/issues/3#issuecomment-230821787, or mute the thread https://github.com/notifications/unsubscribe/AAxerwKUeCL-rs6yquaVS9o9jeEMw1Gmks5qS9NygaJpZM4JBhB8 .

[RevillWeb]

I see what your saying. I wanted to keep the DOM as clean as possible. When the user users a component instead of inline HTML then the element it adds to the DOM is the component itself and not the route element - otherwise you get this:

<rebel-router>
    <rebel-route>
        <home-page></home-page>
    </rebel-route>
</rebel-router>

To me is pointless and just another DOM element getting in the way. Changing this behaviour would take some time as a chunk of the login would need to be moved from the router and to the route element.

In the PN project would it be possible to do use var $route = document.createElement('native-route') and then call PnBaseElement.createdCallback.call($route); or does it need the route to be a child of the router?

[RevillWeb]

In fact I just tried it and it does appear to work. I will do some more testing first as in the current demo app I can only do one navigation.

[RevillWeb]

I just thought, another way to do it could perhaps be this:

<rebel-router>
    <rebel-route path="/test" component="native-route"></rebel-route>
</rebel-router>

And then in the native-route component include your PnBaseElement library and call the required functions from there.

[PixelsCommander]

When user presses back button in iOS

window.polymerNativeClient.back = function () { syncingHistoryWithNative = true; window.history.back(); setTimeout(function(){ syncingHistoryWithNative = false; }, 0); }

is called in JS to roll back browser history to previous state.

syncingHistoryWithNative

Remember you wrote that it is not clear. So it is there to prevent infinite loop of cwitching route.

When window.history.back(); executes it usually fires corresponding event and executes router`s history.change listener which changes route again and activates route in iOS again. To prevent this syncingHistoryWithNative is there. If it is true - .activateRoute executes but do not sends this command to iOS

2016-07-06 20:51 GMT+02:00 Leon Revill notifications@github.com:

In fact I just tried it and it does appear to work. I will do some more testing first as in the current demo app I can only do one navigation.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/RevillWeb/rebel-router/issues/3#issuecomment-230868747, or mute the thread https://github.com/notifications/unsubscribe/AAxer8NWX0nlNzyAVoCnHFu_G3daEtjIks5qS_ktgaJpZM4JBhB8 .

[PixelsCommander]

API does not look simple and native to HTML. Could you introduce two methods of setting route content - by placing it inside of tag and by settign component attribute? First one will keep tag there and when using attribute you may remove route tag.

2016-07-06 20:55 GMT+02:00 Leon Revill notifications@github.com:

I just thought, another way to do it could perhaps be this:

And then in the native-route component include your PnBaseElement library and call the required functions from there.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/RevillWeb/rebel-router/issues/3#issuecomment-230870077, or mute the thread https://github.com/notifications/unsubscribe/AAxer4cOkLWzXvWez0j9Fm7PyzDPDt6Pks5qS_o6gaJpZM4JBhB8 .

[RevillWeb]

Yes I think so, just looking into this now. I've got it working in the browser in my own project. Just need to extend the route element in your project and call createdCallback on PnBaseElement. Will let you know if this works.

[RevillWeb]

Ok, I've got it working in the browser. I had to remove some CSS which was setting native-route to visibility: hidden;. On iOS I get the same issue, the routes are hidden. How would I fix this so I can see if it is working or not?

https://github.com/RevillWeb/polymer-native/tree/master/partials/js-library/src/elements/router

Thanks you!

[RevillWeb]

Looks like I was being silly and forgot to add activateRoute(). This is causing other issues now but I am investigating.

[PixelsCommander]

visibility hidden should be ok so far, I want to replace it with display: none, but later this is a bit more complicated since display none prevents items from getting bounds

2016-07-06 22:55 GMT+02:00 Leon Revill notifications@github.com:

Looks like I was being silly and forgot to add activateRoute(). This is causing other issues now but I am investigating.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/RevillWeb/rebel-router/issues/3#issuecomment-230903727, or mute the thread https://github.com/notifications/unsubscribe/AAxer1cdUF6Gr_MCs9GcyvRPeX_bAVvWks5qTBZOgaJpZM4JBhB8 .

[RevillWeb]

I seem to have got it working!

I had to remove the setTimeout() you had in the attachedCallback method within PnBaseElement and also the CSS I talked about (to get it to work in the browser) not sure what these changes might affect?

Could you please review the changes when you get a moment and let me know what you think the next step would be?

https://github.com/RevillWeb/polymer-native/tree/master/partials/js-library/src/elements/router

Thank you.

[PixelsCommander]

Great! Will review tomorrow

[RevillWeb]

Thank you, note that you'll need the latest version of rebel-router installed. V 0.7.0. 😎