Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I'm looking for good frontend "template engine" of some sort. I've spent 2 days researching. I've looked into Polymer (by Google), Reactjs (by Facebook), Skatejs (by Atlassian), Rivet (used by Dell) and Angularjs directives (by Google).
Now, I need some help.
Desired features:
data binding (one or two directional)
parsing custom elements, ex: <my-element></my-element> that output some predefined html
the custom elements should have the ability to wrap around nested elements, ex: <my-element><h1>My title</h1></my-element> that output the predifed html with the nested tag at the specified location inside that html (similar to webcomponents and Polymer)
minimum abstraction and no new syntax if possible (except some mustache-like templating may be)
a bonus would be html imports
Additionally:
should be stable
should be simple to use, simply drop in (not-in-the-way), not requiring some certain app structure
should do just template-engine things (bad example: Angular does abstract things too much, also include some jquery-like thing, etc)
My findings so far:
I found that Polymer is unstable with the shadow-dom and not working properly without it. Reactjs defines its own language which is unnecessary for me, react also requires nested components to be react components again, and don't allow to be html (limitation due to the custom language). Skatejs doesn't have data binding. Rivet has unstable custom elements and no ability to wrap nested elements. Angular directives are introducing the whole angular js abstraction, which is a bit too much only to get nice templating working.
My question
Is there alternative to the libraries I've tried that match the desired features listed above? If not, can you think of a way to mash some libraries together and achieve such functionality?
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
Is there a standard way (or ways) of packaging a Javascript GUI control such that it is easy for others to use and evaluate?
For example - should classes be named a certain way, should certain methods always be implemented?
Is a raw Javascript GUI control easy to use, or should it have a wrapper to make it usable in a framework? Currently, the code is not written for any framework.
Some background: I am a long time C# (WinForms) developer. To learn Javascript/HTML5, I ported one of my C# GUI projects, a spiral-shaped slider/track-bar, to Javascript and implemented a test harness using a HTML page. My plan is to use JSDoc to generate documentation once the classes/methods are stable.
Thanks in advance for any guidance.
There are a few best practices:
Use as few dependencies as possible.
Dependencies increase the package size and add the possibility that someone up the chain will insert a vulnerability. One dependency may be including a dozen more.
Don't put things in the global scope.
You can't trust other modules not to collide with you. If you must, pick a unique name.
Set "use-strict".
Use strict forces the browser to use more precise interpretation of your code. It can reduce errors and boost performance.
Don't eval.
While not necessarily evil, it's dangerous and often is a shortcut to doing something right.
As with all best practices, there are cases to ignore each of these.
There are some common patterns that js elements use when attaching to a page. Most typical is for an element that most closely matches the behavior is added to the document with a class that the script recognizes. For example <input type="number" class="praise-helix"></input>. HTML5 also supports custom data attributes, meaning that this is valid <input type="number" data-helix></input>.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Without Vue/React I "developed" applications in Vanilla Javascript. There I used some libraries to reuse code from others. Take chart.js as an example: I used it to plot a chart in an election application.
Bootstrap, for example, has a package that is specific to Vue or React. What are the benefits of an specific "library" to the framework?
Applications that don't have specific packages
Now, let's see chart.js: out of my research I haven't found a specific package to Vue.js. How can I use it if so? What about CSS wrappers like Primer and Fomantic-ui? Can I do the same thing as in static applications?
Sorry if this is confuse somehow. If necessary, please ask me for clarification in the comments.
I think any UI library is mostly concerned with the framework specific way of handling things like view updates, rendering, and styling. The frameworks have different concepts regarding those things and therefore individual libs are often necessary to utilize a frameworks ability. When something is being rendered differences in the frameworks have to be taken into account. Therefore you often see library versions for each FE-framework
On the other side, Javascript will always work and therefore a library which bundles functionality (e.g. moment, lodash) can be used in every framework in usually the same way.
If you want to share UI components I strongly recommend using web components which solve framework specific problems like styling as a web standard. You can use them with every framework (e.g Ionic).
In conclusion: JS libraries which aren't concerned with rendering can usually be reused. When it comes to UI libraries, like bootstrap as you mentioned, components often have to be written for each framework. Web components can be a solution because they work with every framework as well as vanilla JS.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
What are main differences between ReactJS and jQuery? All the things are already can be done by jQuery itself then why we need React?
I searched in google and still am not clear about it.
Mostly it explains about the benefits in terms of "views", "components, "state", etc -- concepts that are unfamiliar for someone like myself who has only a superficial understanding of frameworks.
And where we have to use the React? Even for a small application (basic CRUP operation with some validation) we can use or it's really needed for a large application?
jQuery is a JavaScript library that simplifies HTML DOM tree manipulation, event handling, animation, and Ajax.
React allows you to update and render specific components when your data changes, which is great for development of single-page or mobile applications.
React is great for creating reusable sections of UI code, and layering them on top of each other so that you don't need to re-render the DOM as often. I have heard many people say that the more you need to update your DOM, the more you should lean towards React because it is built to treat your application's elements independently, which can make UI/UX seem a lot smoother. jQuery provides independent functions to your code to perform tasks, so it is great for making minor changes to the DOM, without having to restructure your whole UI.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I'm trying to speed up my website. I used www.unused-css.com/ to trim away excess CSS, but I cannot find anything similar for JavaScript. Is there an online service that can detect the js code being used and then trim away the unused code?
Here is the website with the problem: IQ Tests for Kids
I'm using bootstrap code and it is very bloated. I'm sure that I'm only using a fraction of js because I trimmed down my HTML as well.
The best you are going to get is running the JavaScript itself through a dead code removal process, such as the one provided by the Google Closure Compiler with ADVANCED_OPTIMIZATIONS enabled or Uglify's dead_code option. Some people even combine both of these.
Tree shaking is an even better process you will hear people talk about. But this is more difficult to achieve in your case, because tree shaking involves using ES6 modules, which the code you are dealing with almost certainly is not. Thus it would be a lot of work to get that going, as you would have to modify the code.
Don't know any online tool for that, but there are techniques to do what is called "tree shaking". You can google about it more.
Best my used tools to have it working are webpack and Flow
Webpack is quite general tool to make all kind of magic with JS, while Flow is type checking tool which, if you have type checking active can provide very good tree shaking.
But as you mentioned, you are using Bootstrap, so best place to start looking at would be customize your build:
http://getbootstrap.com/customize/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
Currently i'm parsing bbcode server side but i'd like to show a preview just like this site does.
If I process the bbcode serverside using ajax it's a bit laggy, so i thought doing it client side, to just show the preview.
Do you guys know any bbcode parser written in javascript?
It is a bit late, and the question has certainly been answered. However if you are still open to suggestions, and have not yet spent your time converting the indicated parser from C# to JavaScript, I have written a parser (originally in PHP) which I converted myself[2] to JavaScript. It is available at bitbucket under the 3-clause BSD license. The parser seems to be reasonably fast, but I haven't performed any analysis on its speed.
It may not be as flexible in some ways as other possible projects out there, but it does allow defining your own codes ("bb-code" or not, with quite a few properties), and is also all contained within the one file. This is not a simple find-and-replace parser, and is not based on regex.
If this is of any interest to you, it might save you from having to convert that other library. Technically, I'm a relative "unknown", but that's the great things about JS/OSS: you can check out the source to see what I've done.
[2] As a result, there are a few remaining "compatibility functions", but I rewrote things which had native equivalents available.
I haven't personally used any Javascript BBcode parsers, but the top two Google results (bbcodejs and this blog post) seem pretty weak. The former only seems to support simple find-and-replace, and the latter seems to have pre-set BBcode built in, so you'd probably have to hack it a bit if you chose that solution.
Your best options are probably to roll your own solution (possibly basing your work off one of the two links here), or just use AJAX and move on. That's probably the best way to ensure that previews are accurate, and previewing doesn't have to be real-time on every keypress, anyway; a delay before even sending the request is acceptable.
I encountered the same problem, so I wrote my own. That supports BBCode -> AST Array -> any kind of markup, now supports HTML and React. And has plugins and presets support
https://github.com/JiLiZART/bbob