Adobe-Marketing-Cloud / target-atjs-extensions

Adobe Target extensions to at.js to support Single Page Application implementations
56 stars 29 forks source link

Angular2 documentation #12

Closed filoxo closed 6 years ago

filoxo commented 7 years ago

Are Angular2 docs and examples planned? Just wanted to ask the question.

I'm needing to implement at on an Angular2 page, and my team would be happy to share how we achieved it once complete.

XDex commented 7 years ago

@filoxo Sure, once we have a Ng2 extension implemented, we'll make sure to add docs and examples. Sharing of your experience with integrating Target and Ng2 to facilitate extension implementation would be very much appreciated! Thank you!

opiepj commented 7 years ago

Why provide an Angular 2 extension? Do you have a node extension we can just bundle in our React/Angular/Vue applications?

vadymus commented 7 years ago

@opiepj Are you looking for a node package that renders Target on server side? Yes, we are currently working on it and will share examples soon. Please check back within a few weeks.

XDex commented 7 years ago

@opiepj All the extensions have an implicit dependency on at.js and act as a bridge between a particular SPA framework and at.js. Since at.js is not distributied via a NPM repository, neither do the extensions for now, though we might consider publishing them to NPM at some point in the future.. So, in order to support at.js in the context of a SPA, you have to download both at.js and an appropriate extension, and afterwards either include them in your pages besides the framework/vendor JS files, or manually integrate them in your vendor bundle generation scripts, taking care to always include the extension after at.js.

opiepj commented 7 years ago

@vadymus @XDex No, I guess what I'm saying is that if you provide an Angular 2 Extension, then my app would be tied down to your Angular 2 dependencies. I rather just use your vanilla JavaScript at.js library that registers events per state or window location. Rather than loading a bazillion events on the init run time.

Like a sample NG2 or React POC with vanilla at.js would be awesome.

Also Node modules can be used for both server and client side. AWS.js is a great Isomorphic example, I can use the same module for both web and node environments. As long as I have a module bundler like Webpack, Rollup, or SystemJS, I'm all set.

filoxo commented 7 years ago

I think that you're​ maybe making assumptions about the implementation details without it actually having been built. If an Angular extension were provided, it'd be a ready-to-use module that is importable like any other lib (think Angular Material). At worst, it'd be an example for someone to base their own custom implementation on. At this point in time, there are no dependencies because nothing has been built. If it does have dependencies, you probably won't even see them. I'd imagine something like import { AtTrackingModule } from 'atjs/angular-extension'; which provides a Service and a Directive. Seems like a reasonable thing to import. In my mind, the features you're asking for are very doable within an Angular app and a first-party module provided by Adobe but again nothing has been built.

It's also unwise to assume that the the server and the browser function the same. Angular is making some very interesting strides with Angular Universal which allows for server-side rendering. But that also means that the code isn't actually in a browser context, so globals like window and document aren't defined. Same applies for a service worker context. This can become a huge problem for developers who expect that browser === server to be true. It would be much better to ask that the lib or module be where the platform is considered and any logic/warnings/errors be executed.

opiepj commented 7 years ago

Atjs has some input and output that delivers content or metadata. Does that interaction need to be delivered via an Angular directive or service? I think an extendible framework agnostic solution makes more sense. Think of the ecosystem, not the framework.

Also if you deliver a directive/service, then yes you are tieing down a platform. Angular Material, NgPrime, Ng-Bootstrap does 100% tie down a platform. But those are component libraries, we only really need 1 per application. It's unlikely that I will import another library with Angular dependencies especially when Angular releases a new version every week.

I guess my point was not to focus on the Angular side, focus on the node.js side and provide browser support. I can use Webpack to bundle the module for a browser environment. This is how libraries are being built today.

filoxo commented 7 years ago

I'm not sure this issue is the best for tackling your complaints. Open another issue so this one can stay on track.

XDex commented 6 years ago

We've just added an Angular2 Directive implementation, please check out the Wiki page for more info. Also, a demo has been added to Demos