How to use Ruby code inside JST files? - backbone.js

I am using Jammit to package my assets. One of the things it does well is package files with .jst extension and make them available in window.jst namespace in the browser. However, I've been looking for a way to make those templates dynamic, and I'm not sure how to do that or if it's even possible.
What alternatives do I have if I cannot make JST files dynamic?

As far as I can tell with Rails 3.0 it isn't possible. Jammit assumes the JST files are JavaScript files. Maybe in later versions they may add the ability. But I wouldn't count on it happening any time soon.
If you are able to upgrade to Rails 3.1 you can replace Jammit with the Asset Pipeline that allows you to run it through ERB or what ever language you want before it ends up as a JST file.
Kliment Mamykin made a walkthrough to upgrade from Rails 3.0 to Rails 3.1.rc4 with Asset Pipeline enabled.
http://mamykin.com/2011/07/03/upgrading-to-rails31-rc4.html

Related

How to build angular project to compatible with Chrome Extension obfuscation policy

We have been working on an Angular project with TypeScript (Visual Studio Code). We are deploying this project as Chrome Extension in Google Webstore, it was worked fine, but two days back when we try to re-publish the extension with the latest changes, the Chrome Store reject the request with the below reason.
Your item did not comply with the following section of our Program
Policies:
"Content Policies"
Developers must not obfuscate code or conceal functionality of their
extension. This also applies to any external code or resource fetched
by the extension package.
Your item was found to have one or more files that does not comply
with this policy.
Please note that minification is allowed in the following forms:
Removal of whitespace, newlines, code comments, and block delimiters
Shortening of variable and function names
Collapsing the number of JavaScript files
For more information, please review these recommended Minification
Techniques for Google Developers.
We are build our angular project with ng build command.
Our environment parameters:
Angular CLI: 1.5.2
Node: 12.13.0
OS: win32 x64
Angular: 5.2.3
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router
#angular/animations: 5.2.11
#angular/cdk: 5.2.5
#angular/cli: 1.5.2
#angular/material: 5.2.5
#angular-devkit/build-optimizer: 0.0.42
#angular-devkit/core: 0.2.0
#angular-devkit/schematics: 0.0.52
#ngtools/json-schema: 1.1.0
#ngtools/webpack: 1.8.2
#schematics/angular: 0.1.17
typescript-require: 0.2.9-1
typescript: 2.4.2
webpack: 3.8.1
Can anyone help us how to build our project so that it will be compatible with Chrome Extension policies?.
Interesting, Sorry to let you down but I'm afraid that's impossible (without authors help) to convert typescript into readable unobfuscated code.
I was looking into that, I'm afraid that your only option is to ask google to review your source code and check sum it but that will be a pain for both you and the reviewer to do every time theres an update to your extension from your side.
Your only realistic option leftout at that point will be to convert your typescript angular project into purejs angular project, using pure javascript is actually not that scary and should technically speed up different parts of the process if not all of the processes all together, a wise man once said that a good javascript developer can write code that is much more efficient and faster than a group of typescript developers, I'm afraid that's true.. the transcription process that occur when typescript compiles into javascript will always generate "machine code" or in other words unreadable obfuscated code, at least from my point of view, this is all purely my opinions based on the knowledge and exprience I gathered from the start of this computer age (Yes I lived through all of it).
So just to be clear, In it's own weird way: typescript is javascript, which means that some of the core codes like database interactions, classes, functions and html can easily be converted into pure javascript without fuz.
Check this out:
https://www.google.com/search?q=convert+angular+typescript+to+javascript

Structuring frontend and backend (AngularJS, Slim)

Questions: What is the correct / proper structure of Frontend and Backend together? How do I publish whole project after It's done? Will it just work if I copy it all to some host? (I know I have to modify DB paths and stuff, I'm worried about all the updating that composer does.. or am I understanding it all wrong)?
Short explanation of how I got here: I'm a student developing a Time management web application (Projects, Tasks..). I have knowledge of PHP (Slim), JS (JQuery, Angular), HTML, CSS (Bootstrap), SQL. My development flow was first creating a database and setting up an Apache server (Linux). After that I started coding by simply creating a folder, adding sub-folders for backend (DB operations..) and frontend (js, css, view, images...) when I needed them. All the includes were downloaded when I needed them (jquery, bootstrap etc.). I never used composer/ npm /bower.. Which brings me to this:
Current situation: I was about to upgrade form Slim 2 to Slim 3. In the last 6 hours of googling I've completely lost motivation and at the moment I feel like I have no idea what I'm doing. Almost every article/tutorial I read gives me different information: Composer? Bower? npm? Yo?... I feel like I'm doing it all wrong. I tried few of those seeds that create a clean project for you.. WHAT ARE ALL THOSE FILES. I even tried one that creates clean structure of Angular and Slim in one project. Needlessly to say I'm completely lost. I feel like I did all those 100 hours of coding while I should be studying for nothing, since i have no idea how to properly use it.
I'd really appreciate any tip, suggestion, links to stuff that'll help. I feel like all the knowledge of coding I have is just useless since I have no idea how to use it properly. Thank you
This is very simple to work with composer and npm for Slim3 and Angular2
both are different files and main folders
For Slim you will use composer to download all files in vendor folder
For Angular you will use npm to install all files in node_modules
folder
Even the required file is different composer.json for slim and package.json for Angular.
I use Slim with Angular 4 now inaa project and every thing is going smoothly
I don't know what kind of problems you faced, but I'm sure both can work together

Nice Git architecture for server / client?

I'm about to start a pretty huge project.
This project is a website.
The backend will be made with Node
The frontend will be made mostly with Angular
Backend is going to be an API (which is cool with Angular) but also (later) for an Android app.
Frontend is going to be a fork of this repo : https://github.com/maxime1992/webTemplate and I want to be able to pull from upstream to keep the fork up to date.
I am wondering. How should I manage it?
Should I create only one repo, containing back and frontend with Git submodule or subtree.
Should I create two separated repos, one for the frontend, one for the backend and then use symlink to have them together? But if someone wants to run it on Windows ... Too bad.
I want this project to be open source on GitHub so I would like to have something clear and easy for everyone :)
Tell me how you would do it, what's good, what's wrong ... I'm really curious!
As indicated in the comments, Git submodules (or Git subtrees) are not the right solution for this. Use a dependency management tool for this, which will work cross-platform (Linux, Mac, Windows), and is the standard way of doing this.
Separating your backend and frontend into separate projects is a good idea, as it will allow you to manage projects independently and add functionality or additional client applications later without bloating your application.
Since you're already using Angular for the frontend, I suggest you take a look at Bower, which is the de-facto standard dependency management tool for frontend projects. It allows you to define a bower.json file to define your dependencies, e.g. Angular and other frontend libraries, allowing you to assemble your frontend project without having to download and store libraries manually.
In your backend project, you would then also add a bower.json file which declares your frontend project as a dependency by pointing to its Git location and branch. Bower will then take care of downloading your frontend project and adding it into your backend project.
Check out some of the popular Bower tutorials for more info on this...
You can use bower link to automatically create symlinks between your projects - this will work across operating systems as well.
Some other tools that you might want to check out:
Yeoman for scaffolding a base project. There are some nice generators for scaffolding Angular projects, including things like LESS/SASS and Bootstrap (https://github.com/yeoman/generator-angular)
Wiredep for automatically wiring your Bower dependencies into your index.html file.
Getting your initial project setup right will be important. You can start small and grow things to a more advanced configuration later.

Is YUI Compressor useless for ExtJS app minification

My manager wants me to look into initially using YUI Compressor to minify our ExtJS 4.2 app.
So I wrote a python file to concatenate all my ExtJS app files into a single file, and then minify that one file with YUI Compressor.
But I get errors related to objects not found, because order matters with JavaScript.
So for an app with many files, with multiple developers adding new files, it seems questionable whether YUI Compressor can be effectively used to minify ExtJS apps.
Is this true, or am I missing something?
YUI Compressor is must-have tool in the deployment process because it reduces js and css files in about 40%.
In your case you should use YUI Compressor AFTER you compile your ExtJS app into one js file. This is not effective to compress dozens of tiny files before concatenating them.
Of course the order of files for concatenation matters. It is based on dependency requirements declared in each file (which is actually ExtJS class).
I was tired to use Sencha.cmd because it's huge, inconvenient to install on servers, hard to automate and integrate into deployment processes.
I developed my own tool Extapp which makes the ExtJS applications builds. It requires java jre environment to run jar file.
Extapp : https://github.com/liberborn/extapp
Using YUI is not useless, the problem lies with concatenating files without analyzing the dependencies between them.

How do I configure Setup And Deployment Project to use transformed app config?

I've been using SlowCheetah to transform my app.config files and this part is all working fine. The correct transforms are applied to AppName.exe.config when I build the windows client application.
The problem I have is that the S&D Project always looks for app.config which obviously does not contain the updated values.
How can I configure the S&D project to look for AppName.exe.config and package that instead?
After some lengthy research it seems this is not possible when building an MSI using VS 2010 Setup & Deployment.
It may be possible to do with MSBUILD as this is more powerful and flexible but I currently don't have the time to explore that avenue in detail.
So for the time being as a temporary workaround I have entered the values in app.config for the production environment as this is what the MSI will use.
My transforms are still in place for other environments. But seeing as I don't deploy to other environments with MSI it doesn't really matter.
At some stage I will sort this all out with a build server and CI.
Hope this helps someone, someday.

Resources