Mark Mara

Mark Mara

1612013400

Yii2 Widget for Server-side Rendering ReactJS

Yii2-React

This is Yii2 widget that able to use ReactJS components in your Yii2 app, with options of server-side rendering.

Installation

This widget require v8js php extesion. How to setup V8Js PHP extension? Use the links below:

Composer

Set the minimum-stability in your composer.json to dev 2. This widget compile react bundle from npm react and react-dom packages using browserify and uglify-js BUT since composer run scripts only for root composer.json, need to add the following lines to your composer.json:

... 
"scripts": {
"regenerate_react_bundle": [
   "vendor/b-tokman/yii2-react/build-bundles.sh"
],
"post-install-cmd":[
   "@regenerate_react_bundle",
],
"post-update-cmd": [
   "@regenerate_react_bundle",
]
...

This way composer will run browserify to create react-bundle.js and uglifyjs to minify it, each time after upgrade or install

  1. Then run
  $ composer require b-tokman/yii2-react

Composer will download yii2-react package with all dependenices, then npm will download react and react-dom npm packages and scripts will compile it.

Usage

After the installation you’ll be able to use the bTokman\react\widgets\ReactRenderer widget in your app.

ReactRenderer::widget([
    'componentsSourceJs' => <pathToYourComponentJsFile>,
    'component' => <componentName>,
    'props' => [props],
    'options' => [options],
    'useTranspiler' => true //or false
])

  • componentsSourceJs - path to your react components js file

  • component - the name of global variable the contain your React component, you also can use namespased components by dot-notation

  • props - props array that’ll be passed to your component

  • options - Array of options that you can pass to widget:

    • prerender - Tells widget to render your component server-side, by default - true
    • tag - The tag of the element where your component would be passed
    • html attributes - HTML attribute that will be added to the wrapper element of your component. Example: 'id' => 'root'.

  • useTranspiler - boolean, whatever to transpile js code, using bable or not. If you dont have JSX or other specific syntax, dont use transpiler, to save some time

All your reactJs components must be in window scope.

Example

In your view file:

echo ReactRenderer::widget([
    'componentsSourceJs' => 'js/main.js',
    'component' => 'Main',
    'props' => [ 'title' => 'Hello' ],
]);

Example main.js

class Main extends React.Component {
    render() {
        let title = this.props.title;
        return React.createElement(
            "main",
            null,
            React.createElement("div", null, title)
        );
    }
}
window.Main = Main;

Namespased components:

echo ReactRenderer::widget([
      'componentsSourceJs' => 'js/layout.js',
      'component' => 'Layout.Header',
      'props' => ['title' => 'Hello'],
]);

Example layout.js

class Header extends React.Component {
    render() {
        let title = this.props.title;
        return React.createElement(
            "header",
            null,
            React.createElement("div", null, title)
        );
    }
}
class Layout extends React.Component {
    render() {
        return React.createElement(
            "div",
            null,
            React.createElement(Layout.Header, {title: this.props.title})
        );
    }
}
Layout.Header = Header;
window.Header = Header;

Download Details:

Author: bTokman

Source Code: https://github.com/bTokman/yii2-react

#react #reactjs #javascript

What is GEEK

Buddha Community

Yii2 Widget for Server-side Rendering ReactJS
Hollie Ratke

Hollie Ratke

1603245600

An Essential Guide to Rendering your Website

Back in the day, rendering a website was simple. You needed a web server that served HTML files. Those were static sites. Then developers started using databases and authentication. To achieve that, they needed to manipulate the HTML file before serving it.

That’s how **server-side **rendering was born. Let’s fast forward until 2010, when Backbone got released. The front-end got richer and more complex. Then the era of client-side applications begin. Developers migrated their data and routing logic to the client side. They could, because Google “understood” JavaScript. The servers became slimmer, but the websites became more complex. Yet, recently server-side rendering became a trend again. All thanks to React and its server-side hydration feature.

Static sites

Static sites are the simplest way to render a website. You code your website in HTML/CSS, and serve those files from a web server. This is the simplest way to render your website, but it comes with pros and cons.

Cons

Since they’re static, you cannot have dynamic data. To update the data on your static site, you need to edit your HTML files, and deploy them again.

That also means that your visitors won’t be able to “contribute” to the website data. They can’t leave comments, or create their own posts, or “like” your content.

Pros

But, since there’s no “computation” in static sites, they are the fastest to render. The server serves the HTML file, and the browser starts “drawing” immediately. This gives your website fast TTFB (time-to-first-byte) score.

Another benefit that static sites have is the ability to host them on CDNs. A CDN (content delivery network) is a network of servers distributed around the world. Meaning, your website will “live” on many servers at the same time. Also, CDNs are cheaper than dedicated servers!

They’re also more secure. There is no back-end. That means there’s less room for your site to suffer an attack, or your database to get compromised.

So, if you need to create a website that doesn’t update the data on a regular basis, static site might be the best for you. Your site will be fast, cheap, and more secure.

#server-side-rendering #spa #static-website #what-is-server-side-rendering #webdev #webdevelopment #nextjs #react-rendering

Ray Patel

Ray Patel

1625843760

Python Packages in SQL Server – Get Started with SQL Server Machine Learning Services

Introduction

When installing Machine Learning Services in SQL Server by default few Python Packages are installed. In this article, we will have a look on how to get those installed python package information.

Python Packages

When we choose Python as Machine Learning Service during installation, the following packages are installed in SQL Server,

  • revoscalepy – This Microsoft Python package is used for remote compute contexts, streaming, parallel execution of rx functions for data import and transformation, modeling, visualization, and analysis.
  • microsoftml – This is another Microsoft Python package which adds machine learning algorithms in Python.
  • Anaconda 4.2 – Anaconda is an opensource Python package

#machine learning #sql server #executing python in sql server #machine learning using python #machine learning with sql server #ml in sql server using python #python in sql server ml #python packages #python packages for machine learning services #sql server machine learning services

Mark Mara

Mark Mara

1612013400

Yii2 Widget for Server-side Rendering ReactJS

Yii2-React

This is Yii2 widget that able to use ReactJS components in your Yii2 app, with options of server-side rendering.

Installation

This widget require v8js php extesion. How to setup V8Js PHP extension? Use the links below:

Composer

Set the minimum-stability in your composer.json to dev 2. This widget compile react bundle from npm react and react-dom packages using browserify and uglify-js BUT since composer run scripts only for root composer.json, need to add the following lines to your composer.json:

... 
"scripts": {
"regenerate_react_bundle": [
   "vendor/b-tokman/yii2-react/build-bundles.sh"
],
"post-install-cmd":[
   "@regenerate_react_bundle",
],
"post-update-cmd": [
   "@regenerate_react_bundle",
]
...

This way composer will run browserify to create react-bundle.js and uglifyjs to minify it, each time after upgrade or install

  1. Then run
  $ composer require b-tokman/yii2-react

Composer will download yii2-react package with all dependenices, then npm will download react and react-dom npm packages and scripts will compile it.

Usage

After the installation you’ll be able to use the bTokman\react\widgets\ReactRenderer widget in your app.

ReactRenderer::widget([
    'componentsSourceJs' => <pathToYourComponentJsFile>,
    'component' => <componentName>,
    'props' => [props],
    'options' => [options],
    'useTranspiler' => true //or false
])

  • componentsSourceJs - path to your react components js file

  • component - the name of global variable the contain your React component, you also can use namespased components by dot-notation

  • props - props array that’ll be passed to your component

  • options - Array of options that you can pass to widget:

    • prerender - Tells widget to render your component server-side, by default - true
    • tag - The tag of the element where your component would be passed
    • html attributes - HTML attribute that will be added to the wrapper element of your component. Example: 'id' => 'root'.

  • useTranspiler - boolean, whatever to transpile js code, using bable or not. If you dont have JSX or other specific syntax, dont use transpiler, to save some time

All your reactJs components must be in window scope.

Example

In your view file:

echo ReactRenderer::widget([
    'componentsSourceJs' => 'js/main.js',
    'component' => 'Main',
    'props' => [ 'title' => 'Hello' ],
]);

Example main.js

class Main extends React.Component {
    render() {
        let title = this.props.title;
        return React.createElement(
            "main",
            null,
            React.createElement("div", null, title)
        );
    }
}
window.Main = Main;

Namespased components:

echo ReactRenderer::widget([
      'componentsSourceJs' => 'js/layout.js',
      'component' => 'Layout.Header',
      'props' => ['title' => 'Hello'],
]);

Example layout.js

class Header extends React.Component {
    render() {
        let title = this.props.title;
        return React.createElement(
            "header",
            null,
            React.createElement("div", null, title)
        );
    }
}
class Layout extends React.Component {
    render() {
        return React.createElement(
            "div",
            null,
            React.createElement(Layout.Header, {title: this.props.title})
        );
    }
}
Layout.Header = Header;
window.Header = Header;

Download Details:

Author: bTokman

Source Code: https://github.com/bTokman/yii2-react

#react #reactjs #javascript

Brain Crist

Brain Crist

1600347600

SCHEMAS in SQL Server -MS SQL Server – Zero to Hero Query Master

Introduction

This is part 3 of “MS SQL Server- Zero to Hero” and in this article, we will be discussing about the SCHEMAS in SQL SERVER. Before getting into this article, please consider to visit previous articles in this series from below,

A glimpse of previous articles
Part 1

In part one, we learned the basics of data, database, database management system, and types of DBMS and SQL.

Part 2
  • We learned to create a database and maintain it using SQL statements.
  • Best practice methods were also mentioned.

#sql server #benefits of schemas #create schema in sql #database schemas #how to create schema in sql server #schemas #schemas in sql server #sql server schemas #what is schema in sql server

Byte Cipher

1617110327

ReactJS Development Company USA | ReactJS Web Development Company

ByteCipher is one of the leading React JS app development Companies. We offer innovative, efficient and high performing app solutions. As a ReactJS web development company, ByteCipher is providing services for customized web app development, front end app development services, astonishing react to JS UI/UX development and designing solutions, reactJS app support and maintenance services, etc.

#reactjs development company usa #reactjs web development company #reactjs development company in india #reactjs development company india #reactjs development india