Due to some architectural decisions, my team has decided to fallback to using Javascript without any framework dependencies (Angular or react).
I would now want to write custom components(that do the exact same thing as Angular's components: a selector that can be used in HTML with a scope & a controller to play with) with no dependencies on frameworks.
jQuery widgets is an option we thought of. But there's a dependency on jQuery :(
What's the best approach to proceed?
Does ES6 provide any ways to do this?
Angular is parsing the html and searching to match with the selectors.. before this, it parses your templates to generate dynamic code... and a lot more things under the hood.. so, no, you wont be able to create a custom html tag easily.
Maybe take a look at Polymer?
https://www.polymer-project.org/
Why bother creating something what is sucessfully done by a huge team of developers on your own? You will most likely fail.
But if you still want to try it, there's a thing called WebComponents, but it has very limited browser support at the moment. A better support would also lead to another library called Polymer.
Another lightweight library to create custom components is Vue.js.
Fyi: React isn't a framework.
Related
I know little bit of html, so can I just go with the js becasue I just wanna make the one website. that's it.
expecting the answer of the question.
My interpretation of your question is that you'd like to know if you can simply build your website in JavaScript, without much HTML.
I suggest checking out frameworks like:
React, which allow you to build and update your UI from JavaScript.
React allows you to construct components in JSX with HTML-like syntax, although you can choose not to do so if you'd like.
Vue is another option - a hybrid of React and HTML and requires more use of HTML.
If you'd like to do it without any framework, you can manipulate the DOM through JavaScript too, with APIs like document.createElement, document.appendChild and document.textContent. This approach is generally fragile and cumbersome, so I'd recommend that you pick one of the frameworks above if you aren't too familiar with those APIs.
Finally, I personally feel that learning basic HTML, CSS and JS syntax is a basic step to web development and shouldn't be skipped. It serves as a foundation which helps tremendously in problems you might face using web frameworks, and to understand what's actually going on under the hood.
I'm new to angular. Some forums and tutorials show how to integrate jquery plugins in angular. Actually there are plenty of jquery plugins. I used a lot of jquery plugin in my previous projects which were implemented only in jquery. So I would like to get that feel (colors,UI, animation...) into my angular 7 project. But in the middle, I'm worrying that some forums say "Don't mix jquery plugins with angular"
So may I import jquery plugins inside angular? Will it be a problem? For Eg : Datatable has a lot of function where I need most. Jquery Confirm Master gives a better UI. And there are a lot of API calls also. If I need to use these kind of jquery plugins, what can I do?
There are some core reasons you shouldn't access the DOM directly in Angular (as you do with Jquery). I answered a similar question here
Angular is a fully blown framework where you shouldn't differ from the 'Angular way'. There are several reasons for this. For one your code will become very complicated in the way it works. Some things you do in Jquery is very hideous compared to how simple you can implement the same thing with Angular. Another reason is that Angular applications are not always meant to be ran in a browser. For example you can run Angular in a web worker, which doesn't have direct access to the DOM. Your components will become dependent on Jquery when there is no need to, which might hurt you if you want to reuse those components in other Angular applications.
Your value point for sticking to Jquery is that you can reuse that code. To that I will say that you should rewrite those components for your Angular application so you can later reuse those components in other Angular applications. Modernize / rewrite your components now, so you have optimized clean Angular components. You will quickly find that your Jquery code is overly complicated compared to how you do similar things in the Angular framework.
I have a pure javascript library that users can install via npm. I want to add/create an Angular "wrapper" to this library so that it can be used seamlessly within Angular projects but I am not sure how to do this. I am using Angular-cli v6.
This is very similar to How does one go about creating an Angular library wrapper for an existing Javascript library?, however the only response is a link to ng-packagr. I have done a few tutorials on creating a library with ng-packagr, however they don't describe (and I can't find examples elsewhere) of how to create a wrapper around a non-Angular JS library.
Any help is greatly appreciated! :)
An old question but I love it. There's no one simple answer to it, so here's how I did it:
Short version
Read about the internals and how I wrapped the Google Maps Javascript API library
Long version
The following is very abstract, but this is an abstract question, so here goes...
The basic things you probably need to implement are:
Detecting changes in your Angular library and delegating them to the native library.
Detecting native events and bubbling them into your Angular library.
Switching execution in and out of Angular using NgZone.
Other considerations might be performance, scalability, adding new tools over the existing ones, etc. No matter what library you're dealing with, you'll probably end up wrapping a function with a function, a class with a class, a module with a module, etc.
The question arises: "Am I supposed to manually write all that code? Am I seriously going to write a method for each native method?? What happens when the native library changes implementation? I would have to change my code everywhere... 🤔"
To simplify and make your wrapping library scalable, you could automate the wrapping mechanism (one way is using a Javascript Proxy) object.
Combine it with TypeScript's utility types and extension interfaces, and you can create a class that automatically delegates calls to the relevant native object/function, AND you'll get intellisense (for methods that you didn't need to manually implement in your wrapper!).
Here's a more detailed explanation with examples
For events delegation, you could create a mechanism that generates observables (or EventEmitters) for your native events.
In some cases you should consider using NgZone.runOutsideAngular() to prevent unnecessary change detection runs for code that is executed in the native library. On the other hand, you should consider using NgZone.run() to bring execution into Angular's zone when running native code that should enter and affect change detection cycles.
My Angular Google Maps library is open source and you can have a look. I have implemented some very interesting architectural mechanisms in it.
Anyone running into this post and wants more details or help is welcome to contact me.
Cheers 🥂
The idea of web components is to modularize the web regardless of what framework you use.
The Polymer project promise the possibility to create web components, not to be a framework, so it should be possible to use it with any framework. More than that, I should be able to just download the elements from the element catalog and use it without the polymer library, just with the webcomponents.js.
I recognize that this is an ongoing project and most of browser's vendors are still developing the web components requirements, but what I'm concluding so far is that the Polymer is becoming a new framework as I cannot use their elements without the Polymer library and the use with framework as Angular 2 is not yet working well.
Is that a way to use web components in a real modular way without all the boilerplate that the Polymer suggest?
TL;DR;
Polymer does not break the modularity merely by the fact that it's required to use Web Components built with it. It is just a library, albeit opinionated, used to implement custom elements.
These elements are however still independent modules. All of Polymer stuff should be hidden inside a component and not interfere with the outside.
Long read
The idea of web components is to modularize the web regardless of what framework you use
In a sense, yes. Though Web Components target to modularize the DOM really. For general modularization, there are ES6 modules IMO.
The Polymer project promise the possibility to create web components, not to be a framework, so it should be possible to use it with any framework.
I'm not sure what you expect from Polymer and Web Components in general. The modularity of Web Components come from the fact that when used, they are just an ordinary part of the DOM tree. Any existing library can work with that. Any Web Component is just a HTML element and exposes a uniform interface: attributes and events. What Polymer does is add some niceties on top of that so that you can enjoy data-binding, simpler custom element declarations, simpler events API, styling polyfill, shady DOM and more.
It's a dependency like any other and should not stop you from using Polymer (or Bosonic, or x-tag, or basic-web-components) with any other web framework.
More than that, I should be able to just download the elements from the element catalog and use it without the polymer library, just with the webcomponents.js.
Where did you read that? Also, is it a problem that polymer.html is required for the components to work? You may get the same with other Web Components libraries.
I recognize that this is an ongoing project and most of browser's vendors are still developing the web components requirements.
I believe there is a need of clarification. The vendors implement the Web Components spec and where it isn't ready, webcomponents.js fill in the blanks. Just as I write above however, Polymer is a little bit more, because it gives you more than pure specs.
Is that a way to use web components in a real modular way without all the boilerplate that the Polymer suggest?
Not sure what is the bolierplate that you refer to, but yes, you can write Web Components in plain javascript (or in a minimal dependencies fashion) but you will lose some of the sugar that Web Components give you. It is just like arguing that one shouldn't use jQuery, because all that it does can be done without it.
The question is in regard to AngularJS, BackboneJS, EmberJS and the other frameworks.
I have to translate a project from php to javascript and I have to decide, if I am going to use:
AngularJS
Polymer
A combination of them
I prefer using Polymer, because I like it.
Yet, I am missing (and correct me where I am wrong) the ability to make:
Views and link between them (like in Angualar)
Controllers
I know that the structure is up to me, on how to build my application, but it seems that angularjs has a well predefined structure for building mvc-applications.
Therefore I want to know: Is Polymer a substitute for Angular, if you want to build a well structured web application or is Polymer complementary library to be used along other existing frameworks?
EDIT 21.09.2014
No one really answered the question to my fullest satisfaction, therefore I marked it as not answered yet. Many say it just "DEPENDS". But no one is able to elaborate, on what exactly it depends.
On the complexity of the application? On the needs of the application? For what needs does Polymer fit and for which doesn't it fit? These are the answers I was looking for.
Some say it can be used as a frontend framework. Others say that is just a library and others say "Yes and No". Unfortunately rather confusing answers.
I wish there was an official answer to this, but I let you in on what my feeling is. I believe it is a substitute, but Polymer hasn't yet reached the structure, that other frameworks require to work. Maybe this is intentional, maybe it is just a matter of unreached maturity, because the framework is new.
I hope that the creators will explain, when it is best to use AngularJS and when should someone use Polymer for building large scalable web applications.
EDIT 15.08.2015
Polymer 1.0 is out. And it turns out Polymer is officially NOT a framework and is supposed to work in a complentary way with other frontend frameworks.
https://youtu.be/fD2As5RmM8Q?t=6m42s
IMHO both are two different things and they both are to serve two different purposes. Though they have some common features to offer, data-binding can be one of them.
Polymer
If you truly want to use the Awesome Webcomponents, Polymer is one way to achieve that. There are other options like you can go with your vanilla JS, or use other libraries like X-Tag from Mozilla or Bosonic. These libraries polyfill the webcomponent features which are still in drafted state. So, these libs help us have/provide the same user experience across browsers even where there is no native support for the webcomponents.
Angular
This is a full fledged MVC framework. And people here know what Angular as an MVC framework includes/provides.
That all said to answer your question
Google's Polymer is not exactly a fully functioning Frontend Framework and can be used as a Subsitute OR Complement to other Frontend Frameworks. It can be used as a substitution for the V part in Angular as MVC. Like people use React as V in different frameworks. It is not much a different case for me. Being more specific in case of Angular, Polymer is like directives in Angular 1.x while like components in upcoming Angular 2.x.
References
To be more sure of what I am talking about and for additional sources on how to use the Polymer with Angular2 (Angular2 not released to this date)
you can check this video at "https://youtu.be/7WgEuNZCCHk?t=32m15s" starting from time 32:15 where Rob explains how to use the generic webcomponents/polymer as the components/View in the Angular2.
you can check this project "https://github.com/rkirov/youtube-app" which uses Angular2 and google-youtube web component.
https://github.com/ebidel/polymer-experiments/tree/master/polymer-and-angular/together
From the polymer-starter-kit
Framework-free, or framework-compatible
Build your app out of elements, or wire in an external framework to handle business logic. It's up to you!
So, in my view these two projects are not competing each other.
Webcomponent Specs
The webcomponent specs are here for one's reference
Custom Elements - http://w3c.github.io/webcomponents/spec/custom/
HTML Imports - http://w3c.github.io/webcomponents/spec/imports/
Shadow DOM - http://w3c.github.io/webcomponents/spec/shadow/
I just wish the webcomponents are native to the evergreen browsers ASAP.
From the Polymer Starter Kit:
"Framework-free, or framework-compatible
Build your app out of elements, or wire in an external framework to handle business logic. It's up to you!"
Update:
What was described as Carbon Elements seems to fall under:
Polymer(version 2) App Toolbox
Component-based architecture using Polymer and web components.
Responsive design using the app layout components.
Modular routing using the elements.
Localization with <app-localize-behavior>.
Turnkey support for local storage with app storage elements.
Offline caching as a progressive enhancement, using service workers.
Build tooling to support serving your app multiple ways: unbundled for delivery over HTTP/2 with server push, and bundled for delivery over HTTP/1.
Carbon Elements adding framework features
During The Polymer Summit 2015 Keynote, Google announced a new "Polymer idiomatic and framework oriented" set of elements, tentatively named the Carbon elements.
Some quotes from the longer tjsavage answer regarding Angular 2 vs Polymer Carbon:
"The trick is in thinking about the web platform as an application framework... Polymer the library is to the web components component model as the carbon elements will be to using the web platform itself as an application framework: the opinionated rails to make it easier to understand and achieve."
"Angular 2 will provide one way of structuring your application that uses Angular's view of what makes a good application structure. The carbon elements will provide a different way of structuring your application that more directly uses what the web platform itself provides as its structural underpinning."
Polymer is almost fully functional.
Currently it is missing routing for example but this doesn't mean you can't do this with Polymer.
There is now https://elements.polymer-project.org/elements/app-route
In Dart also dependency injection works fine with Polymer because of the types. If it's possible in Dart, it's possible in JS as well because Dart transpiles to JS. DI in plain JS might be more cumbersome though.
In this package (Dart)
https://github.com/bwu-dart/bwu_polymer_routing
I made the routing and DI packages used by Angular.dart available for Polymer. There are also routing packages for Polymer.js available.
I put together some router demos. The "missing parts" really depend on what type of application you're building.
https://github.com/erikringsmuth/polymer-router-demos
I've used it as both, as an enhancement to an app written in another framework, and as the full framework itself, where it was responsible for every element on the page.
I really like just about everything about Polymer, so I've been very happy using it for the whole app, even built my own router. If you've got an existing app I'd recommend dipping your toe in the water, as Polymer works great composed into other apps to see if it's to your liking.
Let me give this another try:
The key behind web-components (and thus Polymer) is, that they are self-contained. You have a web-component somewhere, you import it, and (if you're lucky) it just works, wherever it comes from. The web-component will NOT interfere other components. So doing things like MVC is not Polymers business (although it provides a data-binding mechanism), as this belongs to the process of tying things together. It is considered to be best practice that these kind of things are solved by creating new elements too, that create and react to events. When it comes to the model you code non-visual web-components, that don't have/need a template. TodoMVC has an (outdated) example for that (https://github.com/tastejs/todomvc/tree/gh-pages/examples/polymer).
So Angular gives you a path to follow on how to do MVVM, whereas it is up to you on how to do the "logic" in your app when using Polymer. IMHO Angular is for more complex and rather enclosed apps, whereas Polymer is for any kind of app, that embraces the web. You even can use Polymer, if you're not writing an app at all ;)