my first open source framework

[poryagrand]

i want to introduce my first open source framework. its name is tedjs(easy elemen definer) . a library oriented framework. with this you will can design your html in your way.

you can create elements , attributes , text nodes and comment nodes. you can control every thing.

could you please visit its documents and tell your comments?
i write a complementary library for it. its name is aml. it has some functions to help you. you can use it as a sample.


tedjs documents:
https://tedjs.org/#page:doc

tedjs github:
https://github.com/poryagrand/tedjs

aml github:
https://github.com/poryagrand/tedjs.aml.std

thank you in advance

[davej]

Why do we need another framework? How is this any better than existing frameworks?

 

https://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

[Ingolme]

No need to be harsh. People could have said the same about jQuery when it released. Frameworks like Dojo and Prototype already existed when jQuery was invented.

[poryagrand]

which one is like this? do you know what is it exactly?

you can create your elements. for example:

imagine that you want create 4 side menu box , in html you must write (for example) 10 line code for each times.

it make your code unclear and make writing hard. it was a simple example.

for creating attribute:

imagin you want to write an mouseover event with js for some elements. you must write atleast 3 line code with (jquery).

$(<Element>).on("mouseover",function(){

alert("test");

});

(it is a simple one) now , if you write it again and again ...

your code will be unclear and messy

but if you create an attribute like "hover" you can use it in any element you decide .

like:

<element hover="alert('test')"></element>

(i say again that it is a sample , and there are better examples that shows this framework make works easy)

and also in textnodes for example you can create a javascript inline executer.

like :

js:

var name = "david";

html:

hi {{name}} ==> hi david

these are the simplest samples that i said.

as i said it is a library oriented. it means that it needs developers to develop it and create librarys for it to make it more usefull.

I ask you to read my framework and the say your comments again.

thanks for answering me!

[Ingolme]

I went to your website, it's really slow at loading. It seems to halt loading while the tab is minimized, so I can't browse other pages while I'm waiting for it to load.

 

When the loading bar finally reaches the end, the page alternates between the loading bar and the splash page for a few seconds before staying on the splash page. An alert with the text "char" in it keeps popping up randomly.

 

I clicked "Documents" and the page started scrolling really slowly and jittery. Once it was done scrolling, none of the links in the navigation menu seemed to do anything anymore. After leaving the splash page there seems to be no way to return to it except by typing the URL back into the address bar.

 

I clicked the "Download" button, but it doesn't do anything. The download dropdown is really slow. When I change the dropdown to "Online link" and clicked "Download" a box with a URL starts fading in really slowly.

 

I think you have some typing mistakes on the splash page, it says "Liberary Oriented JavaScript FrameWork Plugin", and the navigation menu says "Librarys" instead of "Libraries".

[davej]

No need to be harsh. People could have said the same about jQuery when it released. Frameworks like Dojo and Prototype already existed when jQuery was invented.

 

Oh, I'm not intending to be harsh or negative, but there are already so many frameworks out there that most people don't even look at them all. Rather than writing an entirely new framework wouldn't it be better to try adding a few desirable features to a framework that already exists?

[poryagrand]

I went to your website, it's really slow at loading. It seems to halt loading while the tab is minimized, so I can't browse other pages while I'm waiting for it to load.

 

When the loading bar finally reaches the end, the page alternates between the loading bar and the splash page for a few seconds before staying on the splash page. An alert with the text "char" in it keeps popping up randomly.

 

I clicked "Documents" and the page started scrolling really slowly and jittery. Once it was done scrolling, none of the links in the navigation menu seemed to do anything anymore. After leaving the splash page there seems to be no way to return to it except by typing the URL back into the address bar.

 

I clicked the "Download" button, but it doesn't do anything. The download dropdown is really slow. When I change the dropdown to "Online link" and clicked "Download" a box with a URL starts fading in really slowly.

 

I think you have some typing mistakes on the splash page, it says "Liberary Oriented JavaScript FrameWork Plugin", and the navigation menu says "Librarys" instead of "Libraries".

 

sorry for my mistakes . but i don't receive this errors.

i test it on firefox and chrome and on smart phone.

just there is an error in IE. that i will correct it.

what is your browser?

i will correcting mistakes.

thanks

[poryagrand]

 

Oh, I'm not intending to be harsh or negative, but there are already so many frameworks out there that most people don't even look at them all. Rather than writing an entirely new framework wouldn't it be better to try adding a few desirable features to a framework that already exists?

 

yest it is better. but first, i wanted to create a library to for my records. i am a iranian computer student. so it will be a point for me . and second , My Framework, wants to to solve different issue . And in my opinion this was not compatible with other frameworks.

 

thanks for answering

[Ingolme]

I'm using Firefox on Windows 8.1.

 

There's a problem with the core foundation of your framework: It encourages writing invalid HTML. Custom elements are not valid. Back in the days of XHTML (the "X" stands for "eXtensible") you were technically allowed to use custom elements by using namespaces or a custom DTD (though it was not well supported by browsers), but this doesn't work in HTML 5.

 

If you want to make this framework compatible with HTML 5 you have to do two things:

1. Use classes instead of element names (for example <div class="tcount"></div>)
2. Use data- attributes (<div class="tcount" data-start="1900"></div>)

This brings another issue with your framework: It's adding unnecessary overhead.

Instead of going through your framework like this:

var tcount = ted.define("tcount", ["start"]);
ted.create(tcount, function( start ) {
  start = parseInt( start );
  var THIS = this;
  if (start > 0) {
    setInterval(function() {
      THIS.html( tedApi.SecToTime(start--).string );
    }, 1000);
  }
  this.show();
});

The developer can take a shortcut and write the code directly for the element itself:

var tcounts = document.getElementsByClassName("tcount");
for(var i = 0; i < tcounts.length; i++) {
  (function(element){
    var start = Number(element.getAttribute("data-start"));
    var interval = setInterval(function() {
      if(start <= 0) {
        start = 0;
        clearInterval(interval);
      }
      element.innerHTML = formatTime(start--);
    }, 1000);
  })(tcounts[i]);
}

function formatTime(seconds) {
  var h = Math.floor(seconds / 3600); h = h < 10 ? "0" + h : h;
  var m = Math.floor(seconds/60) % 60; m = m < 10 ? "0" + m : m;
  var s = seconds % 60; s = s < 10 ? "0" + s : s;
  return h + ":" + m + ":" + s;
}

That's slightly longer than your framework's code, but that's because a function was created to replace SecToTime(). The define() and create() methods of your framework are overhead.

[poryagrand]

I'm using Firefox on Windows 8.1.

 

There's a problem with the core foundation of your framework: It encourages writing invalid HTML. Custom elements are not valid. Back in the days of XHTML (the "X" stands for "eXtensible") you were technically allowed to use custom elements by using namespaces or a custom DTD (though it was not well supported by browsers), but this doesn't work in HTML 5.

 

If you want to make this framework compatible with HTML 5 you have to do two things:

1. Use classes instead of element names (for example <div class="tcount"></div>)
2. Use data- attributes (<div class="tcount" data-start="1900"></div>)

This brings another issue with your framework: It's adding unnecessary overhead.

Instead of going through your framework like this:

var tcount = ted.define("tcount", ["start"]);
ted.create(tcount, function( start ) {
  start = parseInt( start );
  var THIS = this;
  if (start > 0) {
    setInterval(function() {
      THIS.html( tedApi.SecToTime(start--).string );
    }, 1000);
  }
  this.show();
});

The developer can take a shortcut and write the code directly for the element itself:

var tcounts = document.getElementsByClassName("tcount");
for(var i = 0; i < tcounts.length; i++) {
  (function(element){
    var start = Number(element.getAttribute("data-start"));
    var interval = setInterval(function() {
      if(start <= 0) {
        start = 0;
        clearInterval(interval);
      }
      element.innerHTML = formatTime(start--);
    }, 1000);
  })(tcounts[i]);
}

function formatTime(seconds) {
  var h = Math.floor(seconds / 3600); h = h < 10 ? "0" + h : h;
  var m = Math.floor(seconds/60) % 60; m = m < 10 ? "0" + m : m;
  var s = seconds % 60; s = s < 10 ? "0" + s : s;
  return h + ":" + m + ":" + s;
}

That's slightly longer than your framework's code, but that's because a function was created to replace SecToTime(). The define() and create() methods of your framework are overhead.

 

as i remember about html5 , it and css accessing to developer to use custom elements. (i forgot the source.)

yes you are right!

but this is a simplest sample that i mentioned.

imagine that you want to write multi side bars that each one has 10 line code.

as you say you can write it with data attributes and html elements but at end you must write the 10 lines.

so you have two way :

1) use a framework to easy you works.

2) doing by yourself.

if you love coding as me , you will code your self.

or as you said you can simulate the tedjs works with pure js.

but if you don't have time to code all thing your self , so you need some frameworks , like jquery or ...

and with tedjs you can writing a little and use it alot.

in this case in adition of creating element and attributes you can create functional text nodes and comment nodes.

this is the first library that i write for it as sample and its Complementarity.

please visit this page:

https://github.com/poryagrand/tedjs.aml.std

thank you for your time.

[Ingolme]

But your framework, as it is now, still requires the developer to write the code.

 

You probably should change your framework to use classes and data attributes, because most developers are concerned about valid HTML. Valid HTML helps screen readers read HTML pages and helps improve search engine rankings. Have you thought about how the website might look if Javascript is disabled?

 

If you have a source that says custom elements are valid in HTML 5 I'd like to read about it. To my knowledge so far, HTML 5 only allows custom attributes using the data- prefix.

[poryagrand]

yes of course. i said at first it needed to developers to help in framework developing.

but using ted js doesn't mean that create every element by tedjs.

if i meant that , it shows that i am so stupid. i my self , always use html native elements but in cases that html coding is wasting my time , i prefer to use a simplest way.

tedjs can be similar to angularjs templates. in tedjs your hands are open .

some times and for some ones , html validating is not so so important. Certainty it is important but not every where and every time.

i create it to make coding easy for web designer and programer.

i didn't create it for just an one-dimensional aim . i created it for create a wide variety of functions to help developers and web designers. and in this way i will learn more and more.

for answering this question:

 

Have you thought about how the website might look if Javascript is disabled?

 

the answer is simple . if js were disabled , most pages will be disorganized and some unreadable.

so my framework destiny will be like other js libraries.

i hope to god and i will do my best to develop it to the best.

thank you.