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

New major version (4.0) discussion #263

Open
SanichKotikov opened this issue Sep 2, 2018 · 41 comments
Open

New major version (4.0) discussion #263

SanichKotikov opened this issue Sep 2, 2018 · 41 comments

Comments

@SanichKotikov
Copy link
Collaborator

@lindell Hi,

Some questions about next version:

  • do you wanna keep jQuery support?
  • do you wanna keep html element's properties (as options for a barcode) support?
  • do you wanna keep *.min.js files (cdn links), to use the library without npm?
  • do you wanna keep bower support?

Any other thoughts about next major version?

@lindell
Copy link
Owner

lindell commented Sep 2, 2018

  • I think jQuery support may be dropped. It's not like someone can't use it without it.
  • I think it's a good thing. Personally, I like specifying it with the JS options but it was a highly requested feature before it was implemented.
  • Unfortunately a lot of websites still hasn't migrated to the new world of web development where you use package managers (>20,000,000 downloads of JsBarcode each month this way). Therefore I'm not sure about it, even if I would like to remove it. One solution might just be to say to people that wan't CDN support to use version 3.
  • We should drop bower support

@lindell
Copy link
Owner

lindell commented Sep 2, 2018

Also, if we drop the CDN support. We could remove the not so nice gulp scripts.

@lindell
Copy link
Owner

lindell commented Sep 2, 2018

Something I would like to do in the next version it support better tree shaking. The problem is that it would require an API that is not as clean (as I see it).

I imagine something like this.

import jsbarcode, { code128, canvasRenderer } from 'jsbarcode';

jsbarcode(value, element, {
  format: code128,
  render: canvasRenderer,
});

I think this will work in webpack 4 but not in the lower versions.

To support lower versions I think this will be needed

import jsbarcode from 'jsbarcode';
import code128 from 'jsbarcode/format/code128';
import canvasRenderer from 'jsbarcode/render/canvas';

jsbarcode(value, element, {
  format: code128,
  render: canvasRenderer,
});

In either case, no default value for the format or renderer may be set.

@SanichKotikov
Copy link
Collaborator Author

I see, thanks. Now I know that my thoughts close with yours :)
I'll try to think about how to make it all works, if you don't mind. Not right now, of course :)

@SanichKotikov
Copy link
Collaborator Author

SanichKotikov commented Nov 19, 2018

Here is another good point #273

@lindell
Copy link
Owner

lindell commented Nov 26, 2018

I will slowly begin to rewrite jsbarcode now. Will post when I have something to show 🙂

@lindell
Copy link
Owner

lindell commented Jan 19, 2019

I've made some changes now that should be a start to JsBarcode 4.

The answers to all the question in the first post are no. I've been thinking about it, and I want to keep the core as simple as possible so that it can easily be expanded on outside of this library if someone needs it. And also to keep the impact of using the library as small as possible.

Here is an example https://github.com/lindell/JsBarcode/blob/jsbarcode-v4/example/index.js the structure is not correct but used what I had to get something to work as quickly as possible (and enable code splitting). Building is done with npm run build

@lindell lindell pinned this issue Jan 19, 2019
@SanichKotikov
Copy link
Collaborator Author

@lindell wow, great work! Thx.

as small as possible

👍

I'll try it in my project.

@SanichKotikov
Copy link
Collaborator Author

With new API you can create your custom JsBarcode function:

import flatEncodings from '../lib/help/linearizeEncodings';
import EAN13 from '../lib/barcodes/EAN_UPC/EAN13';
import SVGRender from '../lib/renderers/svg';

const options = {
    width: 2,
    height: 100,
    displayValue: true,
    fontOptions: '',
    font: 'monospace',
    textMargin: 2,
    fontSize: 20,
    margin: 10,
    marginTop: 10,
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 10,
};

const encoder = new EAN13('9780199532179', options);

if (encoder.valid()) {
    const svg = document.querySelector('#barcode');
    const encodings = flatEncodings(encoder.encode());
    new SVGRender(svg, encodings, options).render();
}

@SanichKotikov
Copy link
Collaborator Author

SanichKotikov commented Jan 20, 2019

You can even use promises 😁 :

import flatEncodings from '../lib/help/linearizeEncodings';
import EAN13 from '../lib/barcodes/EAN_UPC/EAN13';
import SVGRender from '../lib/renderers/svg';

const OPTIONS = {
    width: 2,
    height: 100,
    displayValue: true,
    fontOptions: '',
    font: 'monospace',
    textMargin: 2,
    fontSize: 20,
    margin: 10,
    marginTop: 10,
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 10,
};

function barcode(element, text, options) {
    return new Promise((resolve, reject) => {
        options = { ...OPTIONS, ...options };
        const encoder = new EAN13(text, options);

        if (encoder.valid()) {
            const encodings = flatEncodings(encoder.encode());
            new SVGRender(element, encodings, options).render();
            resolve();
        } else {
            reject(new Error('Invalid data'));
        }
    });
}

// usage

(async function() {
    try {
        const svg = document.querySelector('#barcode');
        await barcode(svg, '978019953217', { textMargin: 0 });
        // do something next
    } catch (error) {
        // handle errors
    }
})();

@lindell
Copy link
Owner

lindell commented Jan 20, 2019

Yes, everything will become much more modularized :) It will also be much easier to create your own renderer or barcode without having it as a part of jsbarcode.

@lindell
Copy link
Owner

lindell commented Jan 20, 2019

That's nice, but the promise part is not even necessary :) (since nothing in jsbarcode is asynchronous )

import flatEncodings from '../lib/help/linearizeEncodings';
import EAN13 from '../lib/barcodes/EAN_UPC/EAN13';
import SVGRender from '../lib/renderers/svg';

const OPTIONS = {
    width: 2,
    height: 100,
    displayValue: true,
    fontOptions: '',
    font: 'monospace',
    textMargin: 2,
    fontSize: 20,
    margin: 10,
    marginTop: 10,
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 10,
};

function barcode(element, text, options) {
    options = { ...OPTIONS, ...options };
    const encoder = new EAN13(text, options);

    if (encoder.valid()) {
        const encodings = flatEncodings(encoder.encode());
        new SVGRender(element, encodings, options).render();
    } else {
        throw new Error('Invalid data');
    }
}

// usage

try {
    const svg = document.querySelector('#barcode');
    barcode(svg, '978019953217', { textMargin: 0 });
    // do something next
} catch (error) {
    // handle errors
}

@SanichKotikov
Copy link
Collaborator Author

@lindell I've tried to install 4.0.0-alpha.2 and there is no lib directory.

@lindell
Copy link
Owner

lindell commented Jan 20, 2019

I will have a look at it!

@lindell
Copy link
Owner

lindell commented Jan 20, 2019

4.0.0-alpha.4 have the lib folder 🙂

@lindell
Copy link
Owner

lindell commented Jan 21, 2019

Some things needs to be decided before we can publish the first beta of v4.
First, what should we call encoder and renderer? I think the renderer name is pretty good. But I'm not sure about the encoder name, other alternatives are format and barcode.

I'm also thinking about changing the renderer and barcodes from classes to functions since I don't see any reason for them to be classes that is instantiated. The problem is that the barcodes has valid function that is also used right now, two alternatives there is to let the barcode throw the InvalidInputException themselfs, or use a {encode: func, valid: func} structure instead

@SanichKotikov
Copy link
Collaborator Author

The encoder name is obvious for me. Also some other libraries have the same name. The renderer is also good.

I also have a problem with valid function, I can't call it without instantiated a class. The first idea I have, it is to create that method static. But migrating to functions might be a better idea, make the code more declarative.

@SanichKotikov
Copy link
Collaborator Author

Also I thought about typescript 😅but I don't have time for that 😔

@halvardssm
Copy link

A feature I sought out for a while was how to render a barcode inside javascript to use it with jspdf. I got around it using const canvas = document.createElement('canvas') but I would love to see a callback function to put a blob/url to use as an image :)

@lindell
Copy link
Owner

lindell commented Jan 31, 2019

@halvardssm To get a base64 encoded blob with jsbarcode is already very simple and is not something that will be added to jsbarcode 4. The goal with it is to strip out as much as possible that can be done easily anyways,

Code for JsBarcode 3:

function textToBase64BarcodeBlob(text){
  const canvas = document.createElement("canvas");
  JsBarcode(canvas, text);
  return canvas.toDataURL("image/png");
}

@lgrayland
Copy link

Hi, just started using you lib, and have some issues when i installed via yarn, it grabbed "^4.0.0-alpha.5" which i am assuming is still in dev going by this thread

@Crackroach
Copy link

Crackroach commented Feb 23, 2019

Hey, I just ran across this thread and I though I suggest things, if this is open to conversation?

@SanichKotikov asked four things:

do you wanna keep jQuery support?

I would say that it is a good thing if you keep jQuery as it is still a really present library on the web. As of today (2019-02-23) it still accounts for 11% of JavaScript most use library in the top 1 million web site.

On personal experience, I used this library in a project a while ago when I was only starting as a developer. Using it with jQuery made my life WAAAAY easier.

do you wanna keep html element's properties (as options for a barcode) support?

If it is an hassle or way too complex for what it really brings to the library, I would drop it, otherwise I would keep it as it gives the developer another option on how to use the library. With the growing number of library that implement a component-based approach (React, Vuejs, Angular, etc), setting up the library within a component definition is an advantage. Well, I see it as an advantage :P

do you wanna keep *.min.js files (cdn links), to use the library without npm?

As @lindell mentionned:

Unfortunately a lot of websites still hasn't migrated to the new world of web development where you use package managers (>20,000,000 downloads of JsBarcode each month this way). Therefore I'm not sure about it, even if I would like to remove it. One solution might just be to say to people that wan't CDN support to use version 3.

And I very much agree with him.

He also stated that:

Also, if we drop the CDN support. We could remove the not so nice gulp scripts.

When things get too complex for what they really bring up, we tend to botch it. What is the real value of this "feature"? Maybe you could do a little survey on your users? I am even willing to give a hand with this!

do you wanna keep bower support?

I personnaly think you should drop it as it adds works for the developer of this library as well as it is less and less used in project.

See also.

My 2 cents

NPM Scoped Package

If I were to build this great library I would definitely go for a scoped package (see here). You could split each codebar into a different codebar implementation into it's own package within this scoped package. That is also a good alternative to CDN's. Another good reason to do so is to split the workload. If you have some contributors, it's easier to have them maintain or contribute on a certain package.

The only problem I see with this is the dependency hell. But with little management can this problem be avoided.

This tread asked for this feature, @lindell mentionned this is planned, I just specify scoped package would be the way to go ;)

Examples
// Core functionalities
@jsBarcode/core

 // Get all sub-package
@jsBarcode/all

// Get sub-package only for code128. Requires @jsBarcode/core
@jsBarcode/code128
...

Conclusion

I think this library is really great! I believe that every choices made for developing it further will make it even greater.
A

Let me know if I can contribute in any way!

@lindell
Copy link
Owner

lindell commented Feb 25, 2019

@lgrayland I will take a look at it. Thought alpha tags would not be used as default

@lindell
Copy link
Owner

lindell commented Feb 25, 2019

@Crackroach
When it comes to jQuery support. What we mean is that it will not be unusable with jQuery. Just that you will have to write

JsBarcode("#id",

Instead of

$("#id").JsBarcode(

Do you see any reason to still keep it?

@Crackroach
Copy link

When it comes to jQuery support. What we mean is that it will not be unusable with jQuery. Just that you will have to write

JsBarcode("#id",

Instead of

$("#id").JsBarcode(

Do you see any reason to still keep it?

@lindell
To be honest, no I don't. What I stated was entierly based on personal experience. When I started to program I used jQuery as it (seemed it) was simpler than actual JS code. Your library actually manage to grab the element, so I don't think that would still be useful.

@lindell
Copy link
Owner

lindell commented Feb 25, 2019

@lgrayland npm apparently sets the latest tag to newly published version independent of the naming. It should be set on the last stable version again, and newly tagged alphas should not be tagged with the latest tag.

@Hi-NNN
Copy link

Hi-NNN commented Mar 26, 2019

can provide 'pt' for print diff dpi

@jaguarxii
Copy link

Perhaps this is not the thread for this "suggestion", but I would like to see if it is possible to have the option to have SVG elements or paths.

This is because I mainly use this library to embed the barcode in PDFs, I used pdfKit and pdfMake:

  • pdfKit is "easier" to embed the path barcode because it supports natively.
  • pdfmake requires converting to base64 in order to embed the barcode, so for this library is not a big deal anyway.

thanks!

@ewliang
Copy link

ewliang commented Aug 8, 2019

It would be nice for it to support 2D barcodes like PDF417, QR Codes, etc.
Another nice thing would be a scanner feature.

@SK-Commit
Copy link

@lindell Code 39, mod43 typing is not included in jsbarcode.d.ts:
CODE39(value: string, options?: Code39Options): api;
interface Code39Options extends BaseOptions { mod43?: boolean; }
should fix this

@softboy99
Copy link

It would be nice for it to support 2D barcodes like datamatrix,PDF417, QR Codes, etc.

@lindell
Copy link
Owner

lindell commented Oct 24, 2020

2D Barcodes will not be included in JsBarcode. The focus is and will remain 1D barcodes. There already exists a lot of amazing libraries for specific 2D barcodes :)

@ScotsScripts
Copy link

2D Barcodes will not be included in JsBarcode. The focus is and will remain 1D barcodes. There already exists a lot of amazing libraries for specific 2D barcodes :)

Your script is just done right, thank you. Do you have a recommendation for a QR Code script, one that you'd use if you needed to?

@zakm
Copy link

zakm commented Apr 8, 2022

Is there any plan to make it easy to specify switching between code128 sub-types for substrings of an input value? Issue #365 describes the desired behaviour more or less.

@ShaktiMandal
Copy link

does this supports vue3 with vite ? I have tried to install jsbarcode but while building my project, i gets error - cannot call namespace ('jsBarCode'). Any help will be much appreciated.

@Crackroach
Copy link

  • jQuery support can be drop. Having a second package (third party maybe) could be a more modular way of doing it and it could reduce dependencies within this project.
  • Keeping the HTML element should be something that is kept. It gives a way to use the library without having to configure everything. See it as a quick use of the lib.
  • No opinion on bower
  • No opinion on CDN

@murali-m-sgsco
Copy link

need support without nodeJS

@wildwind123
Copy link

planned support cli ?
or support api ?
It will be usefull if it will be run it in docker, and use this soft from any app, any programming language via api or cli.

@StevenMapes
Copy link

Just thought I'd add my thoughts to the questions posed originally

Q. do you wanna keep jQuery support?
A. No, there's no need for it to use jQuery and for anyone using it in jQuery it's not a big change to move the calls away.

Q. do you wanna keep html element's properties (as options for a barcode) support?
A. Yes, personal preference as I like having markup within tags as it can make it easier to build especially if working with some thing like HTMX (https://htmx.org/)

Q. do you wanna keep *.min.js files (cdn links), to use the library without npm?
A. 100% yes, it was the main reason I use this library

Q. do you wanna keep bower support?
A. Not relevant to me

@arcanisgk
Copy link

Hello, very nice and all, but I would like a printing interface that makes it easy to grab the image with the barcode and send it to print to a label printer, or perhaps to a network/USB printer... also make the coffee... but that's too much to ask.

@StevenMapes
Copy link

Hello, very nice and all, but I would like a printing interface that makes it easy to grab the image with the barcode and send it to print to a label printer, or perhaps to a network/USB printer... also make the coffee... but that's too much to ask.

You can do this already but putting the image on an HTML page and using CSS to set it up for the label size you want to do. Then you can use JavaScript to trigger the browser print. I'm doing this for a client but loading a print ready html page into a hidden iframe on the page and then triggering the print so they can choose the network printer to print to

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

No branches or pull requests