Share My Creation [BANano] Web App library with Abstract Designer support

Discussion in 'B4J Share Your Creations' started by alwaysbusy, Jan 16, 2019.

  1. alwaysbusy

    alwaysbusy Expert Licensed User

    Download the latest version here: https://www.b4x.com/android/forum/t...rogressive-web-app-library.99740/#post-627764

    BANano is a FREE B4J library to create websites/webapps with (offline) Progressive Web App support.

    Unlike its big brother ABMaterial, BANano does not rely on any particular framework like Materialize CSS.

    Why a second framework? Well, from the start ABMaterial was build with a back server in mind. B4J has great support to setup a very powerful jServer to handle web requests. Which does mean all intelligence is at the server side and you have the full power of B4J to do whatever you want (secure database access, serial communication, cache control etc). With B4JS, some of this intelligence could be transferred to the browser side, but the app still needs internet/intranet access so this is as far as it could go.

    BANano is a different animal. It can use a Service Worker to 'install' the web app in the browser, so it can also work when the user is offline. While ABMaterial builds the page from the server side, BANano builds it from the browser side. This means EVERYTHING you write in B4J is transpiled to Javascript, HTML and CSS.

    [​IMG]
     

    Attached Files:

    Last edited: Feb 11, 2019
    jmon, Peter Simpson, amaxco and 12 others like this.
  2. alwaysbusy

    alwaysbusy Expert Licensed User

    BANano 2.15

    CHANGES:

    1. Support for B4J Type e.g. Type Person(Name As String, Properties As Map, Scores(10) As Int)

    2. Support for NumberFormat and NumberFormat2

    3. BANano.Sleep() is now just B4Js normal Sleep(). BANano.Sleep() will be depreciated in the future.

    4. BANano.GetType() and BANano.TypeOf are now just B4Js normal GetType(). Both BAnano functions will be depreciated in the future.

    5. BANanoSQL new method .ExecuteCallBack(). See for more info: https://www.b4x.com/android/forum/t...anosql-with-own-callbacks.101920/#post-639714

    6. BANanoSkeleton added SKRange, SKRadio, SKSwitch and SKNaviagationBar.
    All views now have a Visibility property.

    IMPORTANT:
    - BANanoSkeleton_Files.zip contains new files. If you use it already in a project, you must copy the new files in your projects Files folder.
    - Open all your layouts and save them so the new property Visible will be saved in the layout.

    7. Bug fixes in the Transpiler

    Download: https://www.b4x.com/android/forum/t...rogressive-web-app-library.99740/#post-627764

    Alwaysbusy
     
    Last edited: Jan 27, 2019
  3. alwaysbusy

    alwaysbusy Expert Licensed User

    BANano 2.17

    CHANGES:

    1. NEW: support for Sender. @Kiffi had the brilliant insight on how I could implement the B4J Sender keyword. This gives BANano a huge potential boost.

    e.g.

    Without Sender:
    Code:
    Sub MultiButton_Click (event As BANanoEvent)
           
    Dim Ret As Long = BANano.GetSuffixFromID(event.ID)

           
    Dim Allviews As Map = BANano.GetAllViewsFromLayoutArray("MultiLayout", Ret)
           
    If Allviews <> Null Then
               
    Dim mButton As SKButton = Allviews.Get("multibutton"' always lowercase
               mButton.Text = "Multi Button changed!"
           
    End If
    End Sub
    With Sender:
    Code:
    Sub MultiButton_Click (event As BANanoEvent)
           
    Dim MultiButton As SKButton = Sender
           MultiButton.Text = 
    "Multi Button changed!"
    End Sub
    2. Because of the new Sender keyword support, the BANanoSkeleton library has been updated:

    These events definition have changed:

    Code:
    'Sub RadioTest_Change (event As BANanoEvent, radio As SKRadio)
       Sub RadioTest_Change (event As BANanoEvent)
           
    Dim radio As SKRadio = Sender
    Code:
    'Sub SKSwitch1_Change (event As BANanoEvent, switch As SKSwitch)
       Sub SKSwitch1_Change (event As BANanoEvent)
           
    Dim switch As SKSwitch = Sender
    3. New BANanoObject property which allows you to get the result of a GetField() or GetMethod() call:

    Code:
    Dim myArray() As Int
       myArray = bObjekt.RunMethod(
    "values"Null).Result
    4. For getting the Url params I made a couple of new methods:

    Code:
    ' get the current url
       Dim url As String = BANano.GetCurrentUrl
       
    Log(url)

       
    ' gets a Map with all the params
       Dim m As Map = BANano.GetURLParams(url)
       
    Log(m.Size)
       
    For i = 0 To m.Size - 1
           
    Log(m.GetKeyAt(i) & " = " & m.GetValueAt(i))
       
    Next

       
    ' get one param: if not exists return the default value
       Log(BANano.GetURLParamDefault(BANano.GetCurrentUrl, "test""Alain"))
    5 NEW method BANano.Exists(target) which returns if the target exists in the html (can be an ID, class, tag)

    6. Fixes for Transpiling a String/StringBuilder in some rare cases

    Download:

    https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740/#post-627764

    Alwaysbusy
     
    José J. Aguilar, Cableguy and Erel like this.
  4. alwaysbusy

    alwaysbusy Expert Licensed User

    joulongleu and mindful like this.
  5. alwaysbusy

    alwaysbusy Expert Licensed User

    BANano 2.19

    CHANGES:


    1. Fix for bug in release mode for #if CSS commenting out all generated Javascript after it.

    2. Support for #ExcludeFromLibrary. Modules having this tag set to true will not be compiled into the BANano library.

    3. Fix for bug 'OR' between two String functions:

    e.g. previously failed:

    Code:
    Dim myString As String = "Foo"
       
    If myString.ToLowerCase.Contains("foo"Or myString.ToLowerCase.Contains("bar"Then
           
    Log("!")
       
    End If

    4. Fix for List AddAll(), AddAllTo()

    5. BANanoObject.Initialize2() second param can now also be an Array. This makes it possible to do this:

    In Javascript:
    Code:
    var myGraph = new Dygraph(div, data);
    BANano:
    Code:
    DygraphObject.Initialize2("Dygraph"Array(div, data))
    6. Support for BANanoPromise. See this tutorial: https://www.b4x.com/android/forum/threads/banano-working-with-promises.102413/

    7. Other Transpiler fixes

    8. Oh and I forgot: I made 3 shortcut methods on the BANanoElement:

    .GetField
    .SetField
    .RunMethod

    All three are BANanoObject methods, now also available on BANanoElement as shortcuts.

    So you can do:

    Code:
    Dim UploadedFiles() As String = BANano.GetElement("#fu").GetField("files").Result
    instead of having to do (both still work):
    Code:
    Dim UploadedFiles() As String = BANano.GetElement("#fu").ToObject.GetField("files").Result
    I hope this will help confused users who do not always understand when to switch from BANanoElement to BANanoObject.

    Download:

    https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740/#post-627764

    Alwaysbusy
     
    Last edited: Feb 7, 2019
    joulongleu and Kiffi like this.
  6. alwaysbusy

    alwaysbusy Expert Licensed User

    BANano 2.25

    CHANGES:

    1. GetViewFromLayoutArray() and GetAllViewsFromLayoutArray() has now an extra first parameter to allow adding the B4J class where the layout was loaded.

    2. New params to config the paths for a build:

    SCRIPTS_FOLDER
    ASSETS_FOLDER
    STYLES_FOLDER

    3. BANanoSkeletonCSS added some properties. You will need to copy the new Library to your Additional Libraries folder if you have already used it.
    the CSS file was also changed.

    4. New example Website with multiple pages. I made two versions, one using a Router, one without a Router.
    IMPORTANT: they need to run on a real server (or e.g. the Chrome Server plugin!)
    It is a real world example I wrote for a friend of mine who ownes a B&B.

    Demonstates:
    - multi-pages
    - multilingual supports
    - browsers Back/Forward buttons support.
    - floating navigation bar

    It is ridiculous how little programming I had to do to make his site. Finished the whole thing in a morning. :)

    Both examples are heavily commented.

    5. The following Javascript DOM objects have been wrapped:

    BANanoWindow
    BANanoHistory
    BANanoLocation
    BANanoGeoLocation/BANanoGeoPosition (https only)
    BANanoConsole
    BANanoNavigator
    BANanoScreen

    Some are used in the examples in (4)

    6. BANanoObject has been extended with:

    AddEventListener
    ClientLeft/Top/Width/Height
    OffsetLeft/Top/Width/Height
    ScrollLeft/Top/Width/Height

    7. Other transpiler fixes.

    Download: https://www.b4x.com/android/forum/t...rogressive-web-app-library.99740/#post-627764

    Alwaysbusy
     
    Last edited: Feb 18, 2019
  7. alwaysbusy

    alwaysbusy Expert Licensed User

    BANano 2.32

    CHANGES:

    1. Two ways to handle old browsers who are not ES6 compliant (like IE 11).

    a. Using the BANano.DetectNoES6Support = true switch

    When there is no ES6 support, an event BANano_NoES6Support is raised. You can then inform the user (e.g. with an alert) that he has to upgrade her/his browser

    b. Using the BANano.ShowWarningsUnsupportedForOldBrowsers = True switch

    In this case, this is more a help for you, the developer. On compilation, you get a warning that you are using some code which will not be usable in a non ES6 browser.
    You can then change this code to something which will run.

    For example if you set this switch to true, and you use the following code:

    Code:
    If BANano.CheckInternetConnectionWait Then
           
    Log("on line")       
       
    End If
    You will get a warning in the log when you compile:

    Code:
    [WARNING]: The method CheckInternetConnectionWait will not work in old browser!
    I have added some polyfills for unsupported code (like the string methods .StartsWith/EndsWith and promises), but some things like async/await are just not working in a non ES6 compatible browser.
    The ...Wait() methods use async/await, so hence the above warning.

    2. Better system for updating Service Worker.

    By using the version param in BANano.Initialize better, the system got a lot smarter in knowing when it has an update:

    Code:
    BANano.Initialize("BANano""ChatNoir"DateTime.Now) '<----------
    BANano.JAVASCRIPT_NAME = "app" & DateTime.Now & ".js"
    3. New method GZipGeneratedWebsite() will GZip your html/css/js/json files on compilation. You can set a minimum filesize so small files are no compressed (it may take longer to decompress such files than the actual transfer).

    4. Some warnings and optimization reminders when you are using an excessive number of CSS/Javascript files. You may not think this is important, but tests have shown your website/webapp will loose the users interest EXPONENTIALLY.
    In almost all cases, you can merge, and even omit certain files because you do not use them anywhere in your code. This is especially the case for jQuery components where plugins or even whole components are loading a lot of javascript and aren't even used in your current website.

    Just think this: your website may look great, but nobody will ever see it as they are long gone because it takes to long to load.

    Some numbers for each one-second delay in page load time:

    11% fewer page views
    16% decrease in customer satisfaction
    7% loss in conversions

    If your website is > 1MB in CSS/Javascript files alone and takes > 2.5 seconds to load, you are probably in trouble. So these are just gentle reminders you should look into this :)

    I will furter look into these and by analysing the source code in the future give you more tips and tricks to make your website the fastest it can be.

    5. Other bug fixes in the transpiler.

    Download: https://www.b4x.com/android/forum/t...library-with-abstract-designer-support.99740/

    Alwaysbusy
     
    Kiffi and joulongleu like this.
  8. alwaysbusy

    alwaysbusy Expert Licensed User

    BANano 2.33

    CHANGES:
    1. Important fix for those who use the service worker. There was a bug in the generated html file.

    2. New param BANano.MinifyOnline = true

    This will use the online API of https://javascript-minifier.com to compress the generated javascript file (normally the app.js file).

    Minify will only do it in Release mode, not in Debug mode (to speed things up while debugging).

    And, only the BANano.Build() command will perform it, NOT the BANano.BuildAsLibrary() command. The final app using the lib will compress it anyway if it uses this parameter.

    Download: https://www.b4x.com/android/forum/t...library-with-abstract-designer-support.99740/

    Alwaysbusy
     
    Last edited: Mar 14, 2019 at 4:03 PM
  9. alwaysbusy

    alwaysbusy Expert Licensed User

Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice