I'm looking for reactjs responsive email framework.
I found MJML, but it is for static templates. I need to generate a dynamics template. I wanna pass data from database to template.
Can you suggest some good solution?
Solutions are available without reactjs.
You're right: MJML handles only static templates.
Lots of email authors are using packages like Handlebars with MJML for the dynamic piece. They write the MJML with Handlebars variables embedded. They run the MJML template through Handlebars, which creates a series of templates, each with the variables replaced from a database, for example. Then, they run the MJML compiler to create the HTML output for all those emails.
Handlebars has competitors. The MJML team has decided not to expand the scope of their project to include variables (as of this writing). That way, their users can pick which of the dynamic packages best meets their particular needs and they're better served.
Some recommend using Gulp to automate the process. The MJML team supports one such Gulp implementation.
A great place to get MJML support is https://slack.mjml.io/
Good luck.
Related
I'm working with jsps in my workplace. Pages were built using bootstrap2. Though new versions of bootstrap and other frameworks came out, I'm stuck with bootstrap2 as we have hundreds of pages using it.
How do I make the style configurable, in the sense, the configuration should give me the freedom to choose the framework, etc. So going forward I can choose what to be used for new pages
I can relate to your problem as this is the case with many "old" products in the market. They could be built with jQuery, plain js or other tools that considered "old" in today's market.
I assume you could not refactor your whole app as you are saying there hundreds of pages. Some options to consider and to set pros and cons for each with management and product teams.
First, you need to decide your technology you want to use and how.
You can use small bits of react/vue.js/other to inject into your existing pages
you can create full pages from newer technologies and slowly replace older pages in the app one by one
start a full rewrite of the app (hard to sell to management)
I did all three options in my projects but you need to decide with your own team.
Now I'll elaborate on what you can do for each of the options:
I use react so can't recommend other libraries, but this is what I used:
https://github.com/rstacruz/remount
You build react components and then you can use them as HTML snippets in your existing code.
You create another app in whatever new language you want and start building out exiting pages one by one. With each new page, you build you link the old app to them.
This is the easiest one to start but the longest one to achieve. But straightforward of what you need to do.
To make the styles configurable, you can add another stlye.css file underneath the bootstrap2 css file. In that style.css file(name it anything you want, can be bootstrap2_override.css) you can add any styles as well as override bootstrap2's framework styles.
The downside to this is that you are now adding another css file with more CSS just to override bootstrap2 styles.
I have an existing application written in mvc5 and Angular1.I want to convert all Angular1 code to Angular4 code. Is there any tool available for migration/I have to do manually.
No, There is no such tool available yet.
You have to create it manually. You need to convert all your pages in components as per documentation
These are few document links you can follow though.
https://www.joshmorony.com/how-to-convert-an-ionic-1-application-to-ionic-2/
https://angular.io/docs/ts/latest/guide/upgrade.html
https://www.codementor.io/angularjs/tutorial/migrating-from-angular-1-to-angular-2
https://vsavkin.com/migrating-angular-1-applications-to-angular-2-in-5-simple-steps-40621800a25b
I've been looking for tutorials on making modules for DNN, and all of them seem to suggest starting from a huge template and then adding what you need to it, but I'm sure there is a way to build a very small, lightweight module with just the barebones. Just use an ASCX view, and show it on the screen. What is the simplest hand-written "Hello World" DNN module? If you really do need a whole lot of extra stuff in a module for it to work, what is the cleanest way to get a module template?
Background: I've come from front-end development, and I'm looking for a way to package my front-end scripts and styles together, then just use a single file as an AJAX endpoint to query to retrieve the data.
Depending on your DNN version, there is an easy way to create a simple module within DNN itself.
When you go to "Host > Extensions", there is a button with something like "Create new module". Fill out the fields and it will create a module for you that you can use like any other.
When the module is added to a page you can edit the source code (C# / VB) in the module itself.
This is the fastest way to create a basic module. But I would still recommend the template from Chris Hammond. It is slightly more complex but will be easier to maintain and can be packaged as a standalone installer for other DNN installations.
I want to implement Sitecore application (single page design with angular js) :
Is that possible ?
If it is possible, what about experience editor, it will work with it ?
What about Sitecore personalization ?
I have no experience with angular js. what should I take in my consideration to achieve this
I will use Sitecore 8. i found this helpful blog about that but as he mentioned, page editor simply won't work
Thanks.
1.
Yes it is possible, I implemented a SPA in Sitecore 7 using AngularJS for the front-end and WebAPI to serve the data from Sitecore Items and it all worked really well together.
You could look into using Sitecore MVC Controllers which will work just as well as WebAPI. Or if you have time to learn a new Sitecore Technology you can look into using Sitecore's Entity Service. Either will work for serving data from Sitecore.
From experience I recommend you make controllers which are responsible for a single type of data consumed by the AnglarJS. The models passed by the controllers should be lean, containing only data relevant to the controllers purpose.
2.
For my implementation, the Experience Editor would not work as I used AngularJS to manipulate and present the data. It could be possible to use Sitecore Controls if you don't pull out the data using AngularJS but I don't think it'll be possible without hacking at it with code.
3.
Personalisation through the Experience Editor should be possible if you use Sitecore Controls. Personalisation through the Content Editor and code will be possible. I recommend you build your SPA as you would most Sitecore implementations; Layout, Sublayout etc. You can implement personalisation through code in the Controllers, Application Logic etc
4.
I had no experience with AngularJs either but I learned everything I needed to know from tutorials and the rest is logical enough for you to figure out if you're familiar with any programming language. I recommend you work through this Codecademy Tutorial that has you completing exercises - its how I learned.
I've yet to write a blog on how I achieved it but Dave Peterson has written two blogs on his experiences with SPA with Sitecore and AngularJs that might be worth a read.
Yes it is possible
Yes you can use the experience editor, BUT you have to build the site in a specific way. Not in the "normal" way.
Again, same as experience editor, you can use it, but the site has to be built to accommodate that.
Not sure on Angular - I have used backbone, but the principles are very similar.
I have a blog post on how we achieved this for a client: http://www.sitecorenutsbolts.net/2015/12/07/Single-Page-Applications-in-Sitecore-Part-I/
Have a read of that, it gives the principles you should follow to enable Sitecore in an SPA.
Anything is possible in Sitecore, but some customization are too complex to be considered practical.
You can easily build SPA application with the following limitations:
Display various views with either
a) server generated templates, or
b) static .html template with Sitecore-managed content (retrieved as json via custom controllers or Content API) and bound to template using AngularJS.
Limit the scope of personalization to just content.
Have experience or page editor view significantly different from the end-user experience. And even then, this will require separate design to create and maintain.
What is significantly more challenging is:
Utilize Personalization to dynamically display different renderings. Hide/show renderings, etc.
Have Experience Editor reflect the actual design of the SPA experience
I'm developing several AngularJS applications and I'm looking for best practices how I can share code, especially directives, between these projects. The biggest problem I'm facing is the following:
Most of my directives contain at least one js file and a html template. The js file often contains a reference to the template. When I include the same js file from two different projects, what's the best way to handle the different paths?
There may be better ways to handle this situation I can't even think of. So, I would like to know if someone has experiences with this situation and how this is handled. Thanks!
I find it helpful to use compiled HTML templates using a build tool like https://www.npmjs.com/package/grunt-angular-templates . There are plenty of Gulp/Grunt alternatives if that one doesn't suite your needs.
Then you will need to keep your templates in namespaced directories so that your consumer applications don't collide.
Then you when you just need to consume a single compiled JS file. The templates are compiled into it. If you need to override the templates in your applicatons, just use the template namespace convention to provide the overrides.
Maybe you can write your code in nodejs style (with CommonJS), locate your files in different folders and such, and then use browserify to combine your js code into one piece. HTML templates can be also easily transpilled into js files using angular template cache and some tool like this one for gulp or maybe some similiar for grunt.